目前CSS這種左右定寬,中間自適應(yīng)的布局是應(yīng)用最廣泛的棚品,而且有多種方法可以實現(xiàn):
左右欄設(shè)置絕對定位靠欢,中間欄設(shè)置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>