实现两列等宽布局的几种方法

很多年前，在CSS-Tricks发布了这个想法，随着时间的改变，我们不断更新这个话题。

当你想实现两列等宽，左边一些内容，右边一些内容时，基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半，并且可以明显的区分他们。在CSS中有很多方法都可以实现，那么来看看如何用多种方法实现这种两列等宽布局。

使用渐变背景

一个简单的方法就是我们可以使用渐变改变背景颜色。一半使用一种颜色另一半使用其他颜色。然而，并不是从一个颜色过渡到另一种颜色，而是在中间设置一个零空间颜色。

.container {
    background: linear-gradient(
        to right, 
        #ff9e2c 0%, 
        #ff9e2c 50%, 
        #b6701e 50%, 
        #b6701e 100%
    );
}

这只能在单个容器元素内工作。这也意味着如果想让它的内容填充容器的两侧，就需要采用浮动或者其他布局方法。

使用绝对定位

另一种方法是在父容器内设置两个子容器，使用绝对定位，利用百分比将他们分离，并设置背景。这种方法的优点是这两个子容器可以容纳自己的内容。

绝对定位有时是一个完美的解决方案，但有时也不太好用。父元素需要设置高度，但是这样做内容无法自适应（内容更改!），更不要说绝对定位会脱离文档流。所以，很难达到所有的要求，但我们可以将其他内容放在下面。

使用（假）table

是的，table布局很老（更不用提它浏览器渲染问题和布局的不灵活性）。然而，我们可以使用display: table-cell;属性，这样可以在HTML中在不使用table的情况下方便创建布局。总之，我们将语义化的父元素添加到表格中，其子元素放入单元格中。这些都是用CSS实现的哦！

你甚至可以很容易在断点处改变display的属性，使双方在很小的屏幕上叠加。display: table和其他属性都支持ie8以上，甚至包括旧版本的安卓。所以，这种方法非常安全！

使用float

可以使用我们的好朋友float将相邻的容器进行布局。这种方法的优点是避免使用绝对定位出现一些之前提过的问题。

这个例子，我们明确的给他们设置了高度，我们不能在默认情况下获得float的能力，在这种情况下你可以使用背景色渐变的技巧让他们看起来是连在一起的，或者使用负外边距等。

你还需要记住父元素需要使用清除浮动，确保正常的文档流。

使用inline-block

如果认为清除浮动很麻烦，那么，display: inline-block是另一种选择。但需要使用一个技巧就是确保元素之间没有空白间隙，否则，右半部分将会被渲染到下一行。

这里没有用inline-block可以帮助我们解决两侧高度相等的问题。所以，这一点你一定要清楚。

这里有很多方法解决上述空白间距的问题

使用flexbox

使用flexbox是一种非常好的方法，只是需要注意它局限于ie10，你需要使用前缀加属性值来得到最好的兼容。

使用这种方法，可以将父元素变为一个可伸缩的盒子，子元素平分其空间大小。不需要设置任何的宽度以及高度！Flexbox知道如何做，因为默认的设置就是如此。例如，flex-direction: row;和align-items: stretch;这些都是默认值，所以我们不需要设置。为了确保可以实现要求，两侧都要设置flex: 1，这样可以使他们平均分配空间大小。

在上面的例子中，容器内容是也可以自适应，为了更好的展示我们将内容水平垂直居中。

使用网格布局

对于那些总是尝试新技术的人来说，css网格布局是Flexbox和Table布局的结合体。换句话说，在定义一个容器时，可灵活的将子元素拆分为列和单元格。

如果下面的单元格叠加了，说明你的浏览器不支持 CSS Grids。在写这篇文章时，仅限于ie10+。

在这里网格布局有可能大材小用，但是，用CSS可以做这么多事情难道不是很酷么？

本文根据@Geoff Graham的《Left Half and Right Half Layout – Many Different Ways》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://css-tricks.com/left-and-right/。