CSS布局 --- 等宽&等高布局

网易云课堂学习笔记三：等宽&等高布局

等宽布局

float+box-sizing

DOM结构

<div class="row">
	<div class="col">1</div>
	<div class="col">2</div>
	<div class="col">3</div>
	<div class="col">4</div>	
</div>

CSS代码

.row {margin-left: -20px;}
.col {float: left; width: 25%; box-sizing: border-box; padding-left: 20px;}

缺点：列数改变，width的百分比也要改变
###table

DOM结构

<div class="container">
	<div class="row">
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3</div>
		<div class="col">4</div>	
	</div>
</div>

CSS代码

.container {margin-left: -20px;}
.row {display: table;width: 100%;table-layout: fixed;}
.col {display: table-cell; padding-left: 20px;}

flex

DOM结构

<div class="row">
	<div class="col">1</div>
	<div class="col">2</div>
	<div class="col">3</div>
	<div class="col">4</div>	
</div>

CSS代码

.row {display: flex;}
.col {flex: 1;}
.col+.col{margin-left: 20px;}

等高布局

<div id="app">
	<div class="left"></div>
	<div class="right"></div>
</div>

table

#app {display:table;width:100%;table-layout:fixed;}
.left, .right{display:table-cell;}
.left{width:200px;border-right:20px solid transparent;background-clip:padding-box;}

flex

#app {display:flex;}
.left{width:200px;margin-right:20px;}
.right{flex:1;}

float

#app {overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
.left{float:left:width:200px;margin-right:20px;}
.right{overflow:hidden;}

这不是真正意义上的等高