流体布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title></title>

<style type="text/css">
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}

.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}

</style>
</head>
<body>

 

<div id="doc">
<header>Header</header>
<div id="content">
<section class="w200">定宽200</section>
<section class="flex3">比例3</section>
<section class="flex1">比例1</section>
</div>
<footer>Footer</footer>
</div>


</body>


</html>

posted on 2015-01-22 18:43  rainbow661314  阅读(109)  评论(0)    收藏  举报