width:100%;

text-overflow: ellipsis;

overflow:hidden;

text-align:center;

'CSS3' 카테고리의 다른 글

자동으로 글자 줄이기  (0) 2012.02.20
box group  (0) 2012.02.20
Box vertical reverse  (0) 2012.02.20

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css3</title>


<!--

HTML 수정없이

1 2 3 4 위치를 2 1 4 3 으로 출력되게 하고 싶을때

-->

<style type="text/css">


body{

font-size:60px;

}

#container 

{  

width: 100%;  

display:-webkit-box;

-webkit-box-orient:horizontal;

}  

#box1   

{  

width:200px;  

background:#ff0000;  

min-height:100px;

-webkit-box-ordinal-group:2

}  

#box2 

{  

width:200px;  

background:#999;  

min-height:100px;

-webkit-box-ordinal-group:1;

 

}  

#box3 

{  

width:150px;  

background:#000000;  

min-height:100px

color:#ffffff

-webkit-box-ordinal-group:4;

#box4 

{  

width:150px;  

background:#0000ff;  

min-height:100px

color:#ffffff

-webkit-box-ordinal-group:3;

}

</style>



</head>


<body>

<div id="container">

    

        <div id="box1">

       1

        </div>

        <div id="box2">

        2

        </div>

        <div id="box3">

        3

        </div>

        <div id="box4">

        4

        </div>

    </div>

 

</body>

</html>

'CSS3' 카테고리의 다른 글

자동으로 글자 줄이기  (0) 2012.02.20
box group  (0) 2012.02.20
Box vertical reverse  (0) 2012.02.20

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css3</title>


<!--

- 세로로 출력하기 단, 역방향으로 출력하기.

-->

<style type="text/css">


body{

font-size:60px;

}

#container 

{  

width: 100%;  

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-box-direction:reverse;

}  

#box1   

{  

width:200px;  

background:#ff0000;  

min-height:100px;

}  

#box2 

{  

width:200px;  

background:#999;  

min-height:100px;  

}  

#box3 

{  

width:150px;  

background:#000000;  

min-height:100px

color:#ffffff

#box4 

{  

width:150px;  

background:#0000ff;  

min-height:100px

color:#ffffff

}

</style>



</head>


<body>

<div id="container">

    

        <div id="box1">

       1

        </div>

        <div id="box2">

        2

        </div>

        <div id="box3">

        3

        </div>

        <div id="box4">

        4

        </div>

    </div>

 

</body>

</html>

'CSS3' 카테고리의 다른 글

자동으로 글자 줄이기  (0) 2012.02.20
box group  (0) 2012.02.20
Box vertical reverse  (0) 2012.02.20

+ Recent posts