CSS 实现：两栏布局（等宽布局）

☊【实现要求】：两栏等宽布局

√【实现】：

♪ 两栏等宽布局（三栏等宽同理）

① float 布局

.col-1, .col-2 {
width: 50%; // 各占一半，尺寸相同
float: left; // 都脱离文档流
}

*要想中间留有空隙，可以给两栏分别加上左右边框，但：box-sizing:border-box;

② inline-block（不推荐）

*元素间有换行符间隙问题，解决方法：font-size:0;

参考：去除inline-block元素间间距的N种方法

.demo3 {
font-size: 0; // font-size 使水平方向重叠，line-height 使垂直方向重叠
.col-1, .col-2 {
display: inline-block;
width: 50%;
}
}

③ flex 布局

中间通过边框留空隙也不会挤下去

.demo3 {
display: felx;
display: -webkit-flex;
.col-1, .col-2 {
flex: 1;
-webkit-flex: 1;
width: 50%;
}
}