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

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

<div class="demo3">
    <div class="col-1"></div>
    <div class="col-2"></div>
</div>

√【实现】：

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

① 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%;
	}
}