左右布局(一栏固定一栏自适应)
BFC
<div>
<div class="left"></div>
<div class="right"></div>
</div>
.left{float: left; width: 10em}
.right{overflow: hidden}
float(书写顺序相反的情况)
<div class="box">
<div class="right"></div>
<div class="left"></div>
</div>
.box{padding-left: 10em;}
.right{float: left; width: 100%;}
.left{
float: left;
width: 10em;
margin-left: -10em;
position: relative;
left: -100%
}
(伪)等高
实现左右两栏高度一致,左右都保持高度高的那一边的高度。
.box{overflow: hidden}
.left{padding-bottom: 99em; margin-bottom: -99em}
.right{padding-bottom: 99em; margin-bottom: -99em}
position
.right
的内容必须必.left
的高度高,否则溢出
.box{position: relative; }
.right{margin-left: 10em}
.left{position: absolute; top: 0; left: 0; bottom: 0;/*会撑开容器,或者高度100%*/}
table layout
1.表格
table: border-collapse
合并单元格
不指定宽度,宽度自适应。
2.表格布局
.box{display: table}
.left, .right{display: table-cell}
3.布局导航栏
nav{display: table; border-collaspe: collaspe; width: 100%; line-heigth: 3; table-style: fiexd /*固定宽度*/}
a {
display: table-cell;
text-decoration: none;
background-color: lightblue;
color: aliceblue;
border: 1px solid #fff;
text-align: center;
}