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

版权声明：欢迎转载，转载请注明出处 https://blog.csdn.net/Nate__River/article/details/82053631

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

等宽布局

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

这不是真正意义上的等高