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

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

	}

}