CSS三栏布局（两边固定中间自适应宽度）的方法

最新推荐文章于 2022-08-18 09:49:53 发布

你dodo

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/u012603567/article/details/49786241

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种常见的网页布局方法：绝对定位法和浮动布局法。详细解释了每种方法的实现步骤，并提供了相应的HTML和CSS代码示例。

第一种方法：

　　对于两边固定中间一列自适应的布局方法，我最早使用的是绝对定位法。先看代码：

<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>

　　比如说，我左右两列都是220px，中间宽度自适应，那么我们使用绝对定位实现的方法是这样的：

html,
body {
 margin: 0;
 padding: 0;
 height: 100%;
}
#left,
#right {
 position: absolute;
 top:0;
 width: 220px;
 height: 100%;
}
#left {
 left: 0;
}
#right {
 right:0;
}
#main {
 margin: 0 230px;
 height: 100%;
}

　　这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。我个人现在不再建议使用这种布局。

第二种方法：采用的是浮动布局

　　这种方法和上面的绝对定位方法很相似，只不过这里采用的是浮动，而不是绝对定位，先来看其html代码：

<div id="left">left</div>
<div id="right">right</div>
<div id="main">mian</div>

　　这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面，如上面的html代码所示，下面我们一起来看看其css样式是怎么实现的：

#left,
#right {
 float: left;
 width: 220px;
 height: 200px;
 background: blue;
} 
#right {
 float: right;
} 
#main {
 margin: 0 230px;
 background: red;
 height: 200px;
}

　　是不是好简单一种方法呀，大家可以在本地机子上动手测试一下，效果如下所示：