网易云课堂学习笔记三:等宽&等高布局
等宽布局
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;}
这不是真正意义上的等高