자세히는 모르고 이전에 주말수업했는데, 자료잊어버리기 전에 정리해 두는 것
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>My website</title>
<link rel="stylesheet" href="bbb.css">
</head>
<body>
<section id="mommy">
<div id="kid1">kid1</div>
<div id="kid2">kid2</div>
<div id="kid3">kid3</div>
<div id="kid4">kid4</div>
</section>
</body>
</html>
* bbb.css
#mommy {
border: 2px solid blue;
width: 700px;
height: 300px;
display: -webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
}
#kid1 {
border: 2px solid red;
background: green;
padding: 20px;
margin: 10px;
-webkit-box-flex: 1;
height: 100px;
-webkit-box-ordinal-group: 4;
}
#kid2 {
border: 2px solid red;
background: yellow;
padding: 20px;
margin: 10px;
-webkit-box-flex: 1;
height: 100px;
-webkit-box-ordinal-group: 3;
}
#kid3 {
border: 2px solid red;
background: red;
padding: 20px;
margin: 10px;
-webkit-box-flex: 1;
height: 100px;
-webkit-box-ordinal-group: 1;
}
#kid4 {
border: 2px solid red;
background: orange;
padding: 20px;
margin: 10px;
-webkit-box-flex: 2;
height: 100px;
-webkit-box-ordinal-group: 2;
}
'자바 스크립트' 카테고리의 다른 글
| html5 transition, transform (0) | 2013.02.11 |
|---|---|
| html5 비디오 (0) | 2013.02.11 |
| html5 site구축 (0) | 2013.02.11 |
| [jquery]플리커에서 원하는 이미지 가져오기 (0) | 2012.06.10 |
| jQuery #2 (0) | 2012.05.22 |