单列变双列css_CSS双列、三列、双飞翼、圣杯等15种布局

前言

今天我们来聊点轻松的(emmm。。。)，依稀记得当年第一次去找实习的时候，面试官当场就让我写一个页面出来，就是那种，那种很常见的那种，三列布局。

然后我没写出来，当时确实是css搞不清楚怎么回事。后来第一份实习的工作，第一天去到那里，老大就丢了一个页面过来让我写，也是一个双列布局。。。写了老半天！所以，后来我敏锐地察觉到，css布局是很重要的！

基本上就是这样啦，不闲扯了我们进入正题。这次分享几种常见的双列布局和三列布局，还有你可能听过的双飞翼&圣杯布局，点个收藏指不定哪天就用到了哦~

双列布局(5种)

首先我们来看双列布局，双列指的就是页面分为左右两侧，左侧定宽右侧自适应。

效果图(因为每种写法效果图都是一样的，所以这里直接上图)：

兼容性较好

兼容性好基本上指的就是兼容老ie浏览器的写法了。浮动

浮动是将左侧元素设置为左浮动，然后右侧元素就自然占据剩下的空间了，父元素记得清除浮动。

方法一-浮动

左

右

css代码：

.way {

margin-top: 100px;

width: 100%;

height: 500px;

}

.way-title {

margin-bottom: 10px;

height: 20px;

line-height: 20px;

}

.way-main {

width: 100%;

height: 470px;

min-width: 220px;

border: 10px solid pink;

box-sizing: border-box;

}

.way-main:after {

content: "";

display: block;

overflow: hidden;

clear: both;

}

.way-left {

float: left;

width: 200px;

height: 100%;

background-color: aqua;

}

.way-right {

display: block;

height: 100%;

background-color: bisque;

}

总结：这种写法不好的地方在于必须规定父元素的高度，否则任凭子元素去撑开的话，右侧子元素会把左侧子元素包围起来的(因为左侧是浮动)。

2. 绝对定位

绝对定位是利用左侧子元素绝对定位脱离文档流之后，右侧子元素设置固定的左margin，达到双列布局效果。

写法二-绝对定位

左

右

css代码：

.way {

margin-top: 100px;

width: 100%;

height: 500px;

}

.way-title {

margin-bottom: 10px;

height: 20px;

line-height: 20px;

}

.way-main {

position: relative;

width: 100%;

min-width: 220px;

border: 10px solid pink;

box-sizing: border-box;

}

.way-left {

position: absolute;

top: 0;

left: 0;

width: 200px;

background-color: aqua;

}

.way-right {

padding-left: 200px;

width: 100%;

box-sizing: border-box;

background-color: bisque;

}

总结：这个写法适合左侧定宽列比右侧不定宽列内容要少的时候。因为如果不为父元素设置高度的话，右侧子元素无论有多少内容都是可以正常撑开div，但是左侧子元素因为脱离了文档流，所以没有办法撑开。

3. 负margin

这是一个很巧妙的方案，右侧需要多加一个div。然后通过负margin-left使得左右侧子元素在同一行，然后右侧内部的子元素再通过margin-left来保证内容的展示。

写法三-margin

左

右

对应css：

.way {

margin-top: 100px;

width: 100%;

height: 500px;

}

.way-title {

margin-bottom: 10px;

height: 20px;

line-height: 20px;

}

.way-main {

width: 100%;

height: 470px;

min-width: 220px;

border: 10px solid pink;

box-sizing: bor