CSS有几种实现三栏布局的方法

~
这次给大家带来CSS有几种实现三栏布局的方法，CSS实现三栏布局的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。
所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。
1.绝对定位法
HTML代码如下:
<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>CSS代码如下：
//简单的进行CSS reset
body,html{
height:100%;
padding: 0px;
margin:0px;
}
//左右绝对定位
.left,.right{
position: absolute;
top:0px;
background: red;
height:100%;
}
.left{
left:0;
width:100px;
}
.right{
right:0px;
width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
margin:0px 200px 0px 100px;
height:100%;
background: blue;
}该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
2. 圣杯布局
HTML代码如下：
//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>CSS代码如下：
//习惯性的CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
//父元素body空出左右栏位
body {
padding-left: 100px;
padding-right: 200px;
}
//左边元素更改
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
height: 100%;
}
//中间部分
.main {
background: blue;
width: 100%;
height: 100%;
float: left;
}
//右边元素定义
.right {
background: red;
width: 200px;
height: 100%;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}相关解释如下：
(1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去
(2)把左层margin负100后，发现left上去了，因为负到出窗口没位置了，只能往上挪
(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位
(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果
3. 双飞翼布局
HTML代码如下：
<p class="main">
<p class="inner">
Main
</p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>CSS代码如下：
//CSS reset
body,html {
height:100%;
padding: 0;
margin: 0
}
body {
/*padding-left:100px;*/
/*padding-right:200px;*/
}
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
height: 100%;
/*position: relative;*/
/*left:-100px;*/
}
.main {
background: blue;
width: 100%;
float: left;
height: 100%;
}
.right {
background: red;
width: 200px;
float: left;
margin-left: -200px;
height: 100%;
/*position:relative;*/
/*right:-200px;*/
}
//新增inner元素
.inner {
margin-left: 100px;
margin-right: 200px;
}圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，代码如上。增加多一个p就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。
4. 浮动
HTML代码如下：
//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>CSS代码如下：
//CSS reset
body,html {
height:100%;
padding: 0;
margin: 0
}
//左栏左浮动
.left {
background: red;
width: 100px;
float: left;
height: 100%;
}
//中间自适应
.main {
background: blue;
height: 100%;
margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
background: red;
width: 200px;
float: right;
height: 100%;
}这种方式代码足够简洁与高效，也容易理解
总结
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
用HTML+CSS实现下拉菜单
用CSS3实现发光方格边框
CSS做出鼠标上移图标旋转

---

伊宁县17117096913： CSS实现多栏布局的几种方式 - ？
少往复方： 常用的有以下几种:浮动:缺点:脱离文档流;优点:兼容性好定位:缺点:脱离文档流,可使用性比较差;优点:快捷弹性盒子: flex布局,比较完美但是兼容性不太好表格布局: table布局,适当的时候相当完美网格布局: grid布局,最新的技术

伊宁县17117096913： 如何用CSS实现多栏布局 - ？
少往复方： 外层div居中,css你可以这样写: #con{width:80%;margin:auto;} 多行文本垂中居中,这个就我所知好像没有哪个属性可以做到.不过有很多变通的方法. 楼上两位说的都可以算是其中的方法.不过,你还可以用padding属性.比如: #con{...

伊宁县17117096913： 用CSS编写一个实现三栏布局的样式表(提示:先编写一个简单的HTML文件,包含三个区块,对这三个区块实现三 - ？
少往复方： 这个css样式数据结构;>right floatright with2＂div class=＂div>//div>div class=＂ left floatleft with1＂&gt,可以布局3栏;div>main＂div>div class=＂

伊宁县17117096913： css div 三栏布局,三栏都是顶部对齐但是中栏自适应宽度,如何实现????? - ？
少往复方： 其实很简单,用四个DIV.将三个DIV放到一个大的DIV中.然后三个小DIV第一个用float:left;第二个用float:right;第三个不用float也不用position,只需要用margin-left:第一个div的宽度,margin-right:第二个div的宽度.将最大的DIV设置一下...

伊宁县17117096913： CSS分栏布局的方法绝对定位和浮动指什么? ？
少往复方： 1、绝对定位 绝对定位的优势在于,我们可以丝毫不差地精确控制任何元素的位置—... 那么让我们试一试用绝对定位如何实现下面的布局. 这是一个三栏的布局,并且是居...

伊宁县17117096913： 左中右三分栏、摆布二分栏有哪几种实现体例 - ？
少往复方： div+css结构 总体上 就分三种嘛 固定结构(固定宽度像素) ,流式结构(百分比) ,还有弹性结构(em).最好的 仍是用浮动来实现.无论 是三列仍是两列 .根基结构都是差不多的 .body{text-align:center;}#wrapper{margin:0 auto;text-align:...

伊宁县17117096913： CSS如何实现这样的三栏设计? - ？
少往复方： <div class=＂all＂ style=＂width:100%;height:100%; display:block;＂> <div class=＂diva＂ style=＂background:yellow; border:1px solid #333; width:100px; height:100%;float:left;＂>div a</div> <div class=＂divb＂ style=＂background:green; border:...

伊宁县17117096913： 用CSS+DIV实现固定宽度的三列式分栏 - ？
少往复方： 帮你做了,很简单.把代码复制到记事本,把后缀名改为 ＂.htm＂就可以看了. 为了让你看的更清楚,我把每列加了颜色,(兼容Firefox,IE,等浏览器)<html><head><meta http-equiv=＂Content-Type＂ content=＂text/html; charset=gb2312＂ /...

伊宁县17117096913： div+css进行网页布局的三种方式是哪三种? - ？
少往复方： div+css标准准确来说是xHTML+css,布局用到多个标签,不单止是div一个,布局是div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em这些相互配合使用~~~

伊宁县17117096913： css3三栏布局都是中间自适应的吗 - ？
少往复方： 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法.1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度.