目前没有浏览器支持 box-flex 属性。Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>具有空间弹性的菜单栏</title>
<style type="text/css">
.container {
width:100%;
background-color:#CCC;
display:-webkit-box;
display:-moz-box;
display:box;
}
.container div {
color:#FFF;
font-size:12px;
padding:10px;
line-height:20px;
width:100px;
}
.container div ul {
margin:0;
padding-left:20px;
}
.container .left-aside {
background-color:#F63;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
.container .center-content {
background-color:#390;
-webkit-box-flex:2;
-moz-box-flex:2;
box-flex:2;
}
.container .right-aside {
background-color:#039;
}
</style>
<body>
<div class="container">
<div class="left-aside">
<h2>菜单</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>活动沙龙</li>
</ul>
</div>
<div class="center-content">
<h2>文章列表</h2>
<ul>
<li>文本阴影</li>
<li>色彩模式</li>
<li>多重背景</li>
<li>边框圆角</li>
<li>新型盒布局</li>
<li>盒子阴影</li>
</ul>
</div>
<div class="right-aside">
<h2>工具</h2>
<ul>
<li>天气预报</li>
<li>货币汇率</li>
</ul>
</div>
</div>
</body>
</html>
Processed:
0.021, SQL:
10
