双飞翼布局内容不换行_前端基础面试：如何快速实现三栏布局？说说圣杯布局和双飞翼布局...

三栏布局

三栏布局中耳熟能详的便是圣杯布局和双飞翼布局了。两者都是在解决两边固定宽度，中间自适应的三栏布局，并且主要内容要优先渲染，按照 DOM 从上至下的加载原则，中间的自适应部分要放在前面。

1. 圣杯布局

我们首先将布局的基础框架搭出来，在下面代码中，父 div 包含了三个子 div，我们将 .center 写在最前面，方便最先渲染。为了保证窗口缩小时仍然能展示，我们给 body 设置了最小宽度。

结构：

center

left

right

---

样式：

body { min-width: 630px;}.center { width: 100%; height: 150px; background-color: #94E8FF;}.left { width: 100px; height: 150px; background-color: #FFB5BF;}.right { width: 200px; height: 150px; background-color: #8990D5;}

刷新浏览器，效果如下：

不出所料，三个子 div 各占一行显示了，此时我们给三者都加上左浮动看看效果。

.container { overflow: hidden; /* 清除浮动 */}.center, .left, .right { float: left;}

由于 .center 设置了 100% 的宽度，所以 .left 和 .right 都被挤到下面去了，此时我们要解决的问题就是，如何让它两上去，这就要用到 margin 的负值了。我们知道 margin-left: 10px; 是设置 10px 的左外边距，左边要多空出一点，视觉效果上就是向右移动了 10px，那如果 margin-left: -10px; 呢？左外间距要减少 10px，自然是向左移动 10px 了。

我们回到要解决的问题中，因为 .center 的宽度是 100%，所以 .left 和 .right 排在了第二行，可以理解为排在了 .center 的后面。这个时候，.left 要回到 .center 的最左边，便是要向左移动 .center 的宽度，即 100%，.left 移动了之后，.right 会自动补上 .left 的空位，此时，.right 想要达到 .center 的最右边，只需要向左移动它自己本身的宽度就可以了，即 200px。

.left { margin-left: -100%;}.right { margin-left: -200px;}

这个时候貌似是实现了圣杯布局，仔细一看发现，.center 的文字被遮挡了，此时 .left、.right 都覆盖在 .center 的上面，我们要给两者留出位置。

圣杯布局的做法是先设置父元素 .container 的 padding 属性，给 .left、.right 留出空间，两者需要的空间大小就是两者的宽度，然后利用定位属性使其归位。我们先设置 padding 看看效果。

.container { padding-left: 100px; padding-right: 200px;}

由于父元素设置了 padding，所有子元素都往中间挤了，此时只需将 .left、.right 分别向左向右拉到准备的空位就好了。首先将定位属性设置为 relative，即相对自己定位，.left 要向左移动 100px，.right 要向右移动 200px，所以 .left 只要设置 left: -100px; 、.right 设置 right: -200px; 便能达到效果。

.left { position: relative; left: -100px;}.right { position: relative; right: -200px;}

到这里，圣杯布局便完成了，它的核心思想是使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位让元素移动到相应的位置。完整的代码如下：

结构：

center

left

right

---

样式：

2.双飞翼布局

双飞翼布局与圣杯布局的前部分一样，在给左右两边元素留出位置的思路有区别。圣杯布局是设置了父元素的 padding 留出空间，之后利用 relative 来归位。双飞翼则是多加了一个 div，将中间自适应部分包裹起来，利用子 div 的 margin 来给左右元素留空间。

结构：

center

left

left

样式：

body { min-width: 630px;}.container { overflow: hidden;}.center-container { width: 100%; float: left;}.center-container .center { height: 150px; background-color: #94E8FF; margin-left: 100px; /* 新添加的属性 */ margin-right: 200px; /* 新添加的属性 */}.left { width: 100px; height: 150px; background-color: #FFB5BF; float: left; margin-left: -100%;}.right { width: 200px; height: 150px; background-color: #8990D5; float: left; margin-left: -200px;}

同样的问题，双飞翼布局通过多加一个 div 并使用了 margin 来实现，圣杯布局则是使用 padding、相对定位(relative)、设置偏移量(left、right)来实现，相对来说，双飞翼布局更容易理解。在圣杯布局中，无限缩小屏幕(假设没有设置 body 的最小宽度)，当 .main 的宽度小于 .left 时，会出现布局错乱。

欢迎关注