css實現左邊定寬右邊自適應的5種方法總匯

在網頁布局中，通常需要實現左邊定寬右邊自適應布局，默認html的結構如下：

<div class="box">
    <div class="left">左邊定寬</div>
    <div class="right">右邊自適應</div>
</div

 

 

1、浮動布局

左邊設置左浮動，右邊寬度設置100%

.left{width:200px;float:left;background: red;}
.right{width:100%;margin-left: 200px;background: blue;}/*等於左邊欄寬度*/

 

 

2.flex布局

父容器設置 display：flex；Right部分設置 flex：1 

.box{ display: flex;}
.left{width:200px;background: red;}
.right{width:100%;flex:1;background: blue;}/*等於左邊欄寬度*/

 

 

3、使用負margin

首先需要修改html結構，為自適應部分添加容器 .right_content, 同時改變左右部分的位置。

html結構：

<div class="box">
  <div class="left">左邊定寬</div>
  <div class="right">
     <div class="right_content">右邊自適應</div>
  </div>
</div>

 

css代碼：

*{margin:0;padding: 0;}
.left{width:200px;float:left;margin-right:-200px;background: red;}
.right{width:100%;float:left;}
.right_content{margin-left:200px;background: blue;}

 

 

4.絕對定位

左右兩邊都絕對定位  

.left{width:200px;background: red; position: absolute;left:0;}
.right{width:100%;background: blue;position: absolute;left:200px;}/*等於左邊欄寬度*/

辦公資源網址導航 https://www.wode007.com

 

5.table布局

table(父級元素)與tabel-cell（兩個子集元素）  

.box{display: table;width:100%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; display: table-cell;}

 

display:table-cell的元素具有以下特性：

text-align、vertical-align等對齊屬性起作用，margin不起作用。寬高百分比值不起作用。
會生成虛擬的table、tr把自己包裹住，如果有相鄰的兄弟元素也被設置了table-cell,則會跟兄弟元素一起生成虛擬的table、tr把自己包裹住，並一行等高顯示
多個table-cell元素會占滿被設置了display: table的元素的寬度，如果一個元素被設置了寬度，那么其他剩余的table-cell元素會占滿剩下的寬度。當然，如果只有一個table-cell元素，就算設置了寬度也會占滿table元素的寬度。
對設置了float、absolute的元素不起作用。且IE6、7不支持