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

這不是真正意義上的等高