<!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 vertical reverse (0) | 2012.02.20 |