解决 等分 布局

等分布局

每一列的间距一样，


(1)用浮动比较复杂。float
<div class="parent">
	<div class="column"> <p class='content'>1</p> </div>
	<div class="column"> <p class='content'>2</p> </div>
	<div class="column"> <p class='content'>3</p> </div>
	<div class="column"> <p class='content'>4</p> </div>
	<div class="column"> <p class='content'>5</p> </div>
</div>


<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}

	.parent {
		margin-left: -20px;
		background-color: #ddd;
	}
	.content {
		background-color: #999;
	}
	.column {
		float: left;
		 20%;
		padding-left: 20px;
		box-sizing : border-box;
		background-color: #369;
	}

</style>

(2)table
缺点就是多了一行div

<div class="parent-fix">
	<div class="parent">
		<div class="column"> <p class='content'>1</p> </div>
		<div class="column"> <p class='content'>2</p> </div>
		<div class="column"> <p class='content'>3</p> </div>
		<div class="column"> <p class='content'>4</p> </div>
		<div class="column"> <p class='content'>5</p> </div>
	</div>
</div>
<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}

	.parent-fix {
		margin-left: -20px;
	}

	.parent {
		display: table;
		 100%;
		table-layout: fixed;	/*布局优先，平分单元格。*/
	}
	.content {
		background-color: #999;
	}
	.column {
		display: table-cell;
		padding-left: 20px;
		background-color: #369;
	}

</style>


(3)一直以来最强大的布局方式 flex
缺点就是兼容性问题

<div class="parent">
	<div class="column"> <p class='content'>1</p> </div>
	<div class="column"> <p class='content'>2</p> </div>
	<div class="column"> <p class='content'>3</p> </div>
	<div class="column"> <p class='content'>4</p> </div>
	<div class="column"> <p class='content'>5</p> </div>
</div>

<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	.parent {
		display: flex;
		table-layout: fixed;
		background-color: #ddd;
	}
	.content {
		background-color: #999;
	}
	.column {
		flex: 1;
		background-color: #369;
	}
	.column+.column {
		margin-left: 20px;
	}

</style>