CSS布局——左右定宽，中间自适应(方法1)
2016-06-17 本文已影响140人
只是一个怪咖
目前CSS这种左右定宽，中间自适应的布局是应用最广泛的，而且有多种方法可以实现：
左右栏设置绝对定位，中间栏设置margin-left，margin-right；
<head>
<style>
*{margin:0;padding:0;}
.left {position:absolute; top:0; left:0; width:200px; border:1px solid #333; background:#aaa;}
.right {position:absolute; top:0; right:0; width:220px; background:#aaa; }
.middle {margin-left:200px; margin-right:220px; border:1px solid #333; background:#ccc; word-break:break-all; }
</style>
</head>
body部分：
<body>
<div class="left">
<h4>left</h4>
<p>000000000
9999999999
8888888888</p>
</div>
<div class="middle">
<h4>middle</h4>
<p>HHHHHHHhhhhhh
000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBbbbbbbb
uuuuuuuuuuuuuuuuuuu
hhhhhhhhhhhhhhhhhhhhh</p>
</div>
</body>
