您的位置：首页 > 其它

如何实现三栏式布局

2016-04-14 13:27 381 查看

在分辨率不同的情况下，使用流动性布局是一个很好地选择，本文介绍常见的几种实现自适应的外部架构：

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; }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 布局

相关文章推荐

新的分享

章节导航