在分辨率不同的情况下，使用流动性布局是一个很好地选择，本文介绍常见的几种实现自适应的外部架构：
1.绝对定位
左右两边采用绝对定位的方式固定在两侧，中间部分利用margin来实现自适应宽度。
<body>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</body>
#left{ height:1000px; width:200px; position:absolute; left:0px; background:#999; }
#right{ height:1000px; width:200px; position:absolute; top:0px; right:0px; background:#999; }
#middle{ height:1000px; margin:0 210px; background:#999; }2.margin负值
此方法需要首先对中间自适应部分外面加个容器，且容器的宽度设置为100%，然后对中间自适应部分两侧加margin实现宽度自适应。此容器和左侧栏、右侧栏绝需要设为浮动，且左侧栏margin设为-100%，这样刚好可以使其到容器的左侧，右侧栏的margin也设置为负值，其职即为右侧栏的宽度的负值。
注意：中间外容器必须放在前面
<body>
<div id="container">
<div id="middle">
</div>
</div>
<div id="left">
</div>
<div id="right">
</div>
</body>
#container{ width:100%; float:left; }
#left{ float:left; height:1000px; width:200px; margin-left:-100%; background:#999; }
#right{ float:left; height:1000px; width:200px; margin-left:-200px; background:#999; }
#middle{ height:1000px; margin:0 210px; background:#999; }3.自身浮动法
利用左右两侧栏的浮动将其固定在两边，然后对中间部分加margin使其做到自适应宽度。
注意：中间自适应部分需要放在最后
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
</body>
#left{ float:left; height:1000px; width:200px; background:#999; }
#right{ float:right; height:1000px; width:200px; background:#999; }
#middle{ height:1000px; margin:0 210px; background:#999; }
9619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
