在布局中，常常出現(xiàn)左邊定寬，右邊自適應(yīng)布局的情況，抽象出來的代碼是：
//css代碼
* {
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
aside {
width: 200px;
height: 200px;
padding-top: 75px;
background: #5A6A94;
}
section {
height: 200px;
padding-top: 75px;
background: #BE4F4F;
}
//html代碼
<!-- 左邊定寬 -->
<aside class="left">Left</aside>
<!-- 右邊自適應(yīng) -->
<section class="right">Right</section>
效果圖：
那么，要實現(xiàn)如下圖的效果，應(yīng)該怎么做那：
1.浮動布局
- 左邊設(shè)置左浮動，右邊寬度設(shè)置100%
.left{
float:left;
}
.right{
width:100%;
}
- 左邊浮動，右邊加上一個margin-left值
.left{
float:left;
}
.right{
margin-left: 200px; /*等于左邊欄寬度*/
}
2.flex布局
父容器設(shè)置 display：flex；Right部分設(shè)置 flex：1
body{
display: flex;
}
.right{
flex:1
}
3.使用負(fù)margin
首先修改頁面結(jié)構(gòu)，為自適應(yīng)部分添加容器 .container, 同時改變左右部分的位置，如下：
<div class="container">
<section class="right">Right</section>
</div>
<aside class="left">Left</aside>
設(shè)置樣式:
.left{
float:left;
margin-left: -100%;
}
.right{
margin-left: 200px;
}
.container{
float:left;
width:100%
}
4.絕對定位
左右兩邊都絕對定位
.left{
position: absolute;
left:0;
}
.right{
position: absolute;
left:200px;
width:100%
}
5.table布局
body{
display: table;
width:100%;
}
.left{
display: table-cell;
}
.right{
display: table-cell;
}
使用table-cell還可以實現(xiàn)很多的布局，需要自己去發(fā)揮想象。總結(jié)下來也就需要記住幾點，設(shè)置了display:table-cell的元素具有以下特性。
- text-align、vertical-align等對齊屬性起作用，margin不起作用。寬高百分比值不起作用。
- 會生成虛擬的table、tr把自己包裹住，如果有相鄰的兄弟元素也被設(shè)置了table-cell,則會跟兄弟元素一起生成虛擬的table、tr把自己包裹住，并一行等高顯示
- 多個table-cell元素會占滿被設(shè)置了display: table的元素的寬度，如果一個元素被設(shè)置了寬度，那么其他剩余的table-cell元素會占滿剩下的寬度。當(dāng)然，如果只有一個table-cell元素，就算設(shè)置了寬度也會占滿table元素的寬度。
- 對設(shè)置了float、absolute的元素不起作用。且IE6、7不支持
