这是一段非常巧妙的div+css代码,可以实现固定侧边栏宽度+内容栏流式自动缩放。之所以非常巧妙,是因为它没有用常见的百分比来布局,而是用了2点技巧来完成:
首先当margin-left为负值且大于盒子本身的宽度,且上一行的最外层盒子为浮动,且内部非浮动盒子用margin-right给盒子返回上一行预留了足够空间时,就会返回到上一行的留空位置。配合 max-width来实现非浮动盒子的流式自动缩放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.content{max-width:1300px;}
.wai { width:100%; height:700px; border:1px solid red; float:left;}
.left {margin-right:370px; height:700px; background:#066;}
.right { float:left; width:370px; height:700px; background:#090; margin-left:-372px; }
</style>
<title>布局</title>
</head>
<body>
<div class="content">
<div class="wai">
<div class="left"></div>
</div>
<div class="right"></div>
</div>
</body>
</html>
最新评论