您现在的位置是：网站首页> 编程资料编程资料

CSS三栏布局探讨——中间固定宽度两边自适应宽度

2023-10-26 433人已围观

简介下面和大家一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用

今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一下这样的布局，特整理了一下代码，贴上来与大家一起分享和学习。

在讲这种布局之前，我还想和大家一起回想一下三列布局中的另一种，就是左右两列固定，中间自适应宽度。这种布局方法，网上问问Ｇ爸和度娘一定会有一大堆，但我还是要重复说说，方便自己今后查阅，记性太差，没办法。别的先不说了，就开始进入主题吧。对于两边固定中间一列自适应的布局方法，我最早使用的是绝对定位法。先看代码

复制代码

代码如下:

<divid="left">左边栏div>
<divid="right">右边栏div>
<divid="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:0230px;
height:100%;
}

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

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

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

复制代码

代码如下:

<divid="left">left div>
<divid="right">rightdiv>
<divid="main">miandiv>

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

复制代码

代码如下:

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

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

第三种方法：负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧

复制代码

代码如下:

<divid="main">
<divid="mainContainer">main contentdiv>
div>
<divid="left">
<divid="leftContainer"class="inner">left contentdiv>
div>
<

您现在的位置是：网站首页> 编程资料编程资料

CSS三栏布局探讨——中间固定宽度两边自适应宽度

相关内容

点击排行

本栏推荐

猜你喜欢