双飞翼布局内容不换行_CSS双列、三列、双飞翼、圣杯等15种布局

前言

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

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

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

---

双列布局（5种）

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

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

兼容性较好

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

1. 浮动

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

<!-- 写法一-浮动

css代码：

.

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

2. 绝对定位

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

<!-- 写法二-绝对定位

css代码：

.

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

3. 负margin

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

<!-- 写法三-margin

对应css：

.

总结：这个方案两个问题，一个必须父元素定高度，也就是不能随子元素心情来决定高度。第二个就是way-right-outside这个div和way-left这个div之间不能有任何空格。总而言之不是一个很好的方案。

不考虑兼容性

可以看到上面考虑兼容性的方案或多或少都有点问题，我们来看看下面不需要考虑兼容ie浏览器的方案。

4. flex布局

首先就是布局神器flex，需要注意的点就是flex布局的右侧子元素需要设置flex: 1，用于占据剩下的空间。

<!-- 写法四-flex布局

对应css：

.

总结：破费！everything is fine！

5. calc计算

<!-- 写法五-calc计算

对应css：

.

总结：同样会遇到如果父元素没有高度，左右侧子元素高度会撑不开的问题。

因此，最优解则是使用flex布局，在一些兼容性需求较高的网站上我们再向下兼容，使用绝对定位的方案。

三列布局（6种）

另一种常见的就是三列布局，著名的双飞翼布局、圣杯布局也是三列布局的一种。三列布局指的是左右侧定宽，中间自适应的布局。

效果图如下，同样所有的方案是一样的效果来的。

兼容性较好

同样三列布局也可以根据兼容性好与否进行分类，先来看看兼容性较好的方案。

1. 浮动

首先还是利用浮动，浮动的话自然就是要设置左右侧元素分别左右浮动，中间元素给适当的宽度，和双列布局差不多的思路。

<!-- 方法一-浮动

对应的css：

.

总结：同样的，只要是浮动就会有不浮动元素包裹浮动元素的问题，所以父元素必须固定高度。还有要注意浮动方案的center节点是放在最后的，否则会因为元素渲染顺序问题而把右浮动元素挤到下一行去。

2. 绝对定位

绝对定位方案也不复杂，主要是设置左右两侧元素绝对定位，然后中间元素给一个适合的左右padding即可，但是。

<!-- 方法二-绝对定位

对应的css：

.

总结：同样有绝对定位的问题，适合左右侧内容高度比中间内容高度低的情况，因为绝对定位元素脱离文档流，如果父元素没有固定高度则无法撑开高度。

3. 圣杯布局

圣杯布局，也是网上很多教程提到过的布局，经典三列布局之一。我们来一步步拆解一下，看看圣杯布局到底是怎么生效的。

首先，我们写几个div元素：

<

当前的css：

.

效果图：

接着为父元素增加一个左右padding的样式，数值大小就是你需要左右定宽的大小：

.

此时的效果图：

下一步我们要做的就是将左右两个子元素放置到左右两个空白处，这里需要用到浮动和负margin，首先是处理左侧子元素，左侧子元素要放置到最左边，需要设置它的margin-left为-100%：

.

此时的效果图：

好像还是差一点，我们再利用相对定位，将左元素往左移动相等宽度的距离：

.

效果图：

这样左元素就处理完了，然后是右元素，右元素就不能再左浮动了，而是用右浮动，然后给元素一个margin-right为宽度大小的负值：

.

效果图如下：

以上，就是圣杯布局的全部了。完整的代码如下：

<!-- 方法三-圣杯布局

对应的css：

.

总结：圣杯布局顾名思义，中间内容可能会很长，而旁边的定宽内容相对来说比较少。另外还有一点要注意的就是如果不给父元素设置固定高度，就要注意清除浮动的问题了，因为三个子元素都是浮动的，撑不开父元素的高度。

4.双飞翼布局

双飞翼布局也是经典的三列布局之一，核心也是浮动。但是它比圣杯布局要复杂，因为它只是中间元素被包裹，而左右元素并没有对应的父元素。

双飞翼布局的中间元素是被div包裹着的：

<

我们先来定义元素简单的样式：

.

效果如下：

下一步，我们给中间元素设置左右margin，为左右元素放进来留下空间：

.

效果如下：

接着设置左元素一个负的margin，大小为100%：

.

右元素同样一个负margin，大小为右侧宽度大小：

.

效果如下：

如果没有边框的话基本上双飞翼就已经完成了，但是因为边框的影响，我们需要调整一下左右元素的位置，使用相对定位，根据边框大小进行调整：

.

最终效果：

最后贴一下最终代码：

<

对应的css：

.

总结：双飞翼布局和圣杯布局最大的不同就是双飞翼多了一个包裹着中间元素的div，核心都是利用浮动，再设置适当的负margin值。

不考虑兼容性

最后介绍两种不考虑兼容性的布局，和双列布局类似，同样是使用flex和calc计算。

5. flex布局

<!-- 方法五-flex

对应css：

.

总结：父元素设置flex，中间元素设置flex: 1。完美！

6. calc计算

这个方法需要三个元素设置为inline-block，calc函数计算的是中间元素的width。

<!-- 方法六-calc计算

对应的css：

.

总结：方法很简单，但是要注意三个div之间不能有空格和换行。

---