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

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

2021-09-07 1035人已围观

简介下面和大家一起探讨和学习了一种用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>
<divid="right">
<divid="rightContainer"class="inner">rightdiv>
div>

从上面的Html代码中我们可以明显得看出，在main,left,right三个div内部我都增加了一个div，那么他们起了什么样的作用呢，大家从下在的CSS中可以明显的体会出来。

复制代码

代码如下:

#main{
float: left;
width:100%;
}
#mainContainer{
margin:0230px;
height:200px;
background: green;
}
#left{
float: left;
margin-left: -100%;
width:230px
}
#right{
float: left;
margin-left: -230px;
width:230px;
}
#left.inner,
#right.inner{
background: orange;
margin:010px;
height:200px;
}

简单的说一下其实现原理，这种方法布局，主要运用的是负的margin值。首先在div#main中我定了一个100％宽度并进行左浮动，并且主内容是放在其内层div#mainContainer中，并在这个主内容层中需要进行一个margin-left和margin-right设置，并且这两个值是很有讲究的，并不是可以随便设置的，这两个值需要等于左右两列的宽度。我们此处是230px。左栏和右栏都使用负的margin值加上左浮动来布局，左栏是左浮动并加了一个“margin-left:-100%”,这是因为div#left前面有一个div#main，并且其宽度为100％，这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边；而右栏也进行左浮动，但其定义的“margin-left”也是负值，并且等于其自身的宽度230px；最后在div#left,div#right中加上一个div.inner是为了更好的控制边栏与主内容列之间的间距。比如说此例的10px。大家可以看看其效果是不是和第二种方法一样。

上面

上一篇：文本输入框文字左移输入示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：通过css旋转字体示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

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

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

相关内容

点击排行

本栏推荐

猜你喜欢