這次帶給大家CSS自適應佈局詳解，CSS自適應佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。
本篇文章將介介頁面佈局中的自適應佈局，常見的自適應佈局有以下2種：左列固定右列自適應、左右兩列固定中間自適應。
說明：左列固定右列自適應，也可以為右列固定左列自適應，常見於中台管理介面、行動裝置Web的清單展示等等。
<p class="container"> <p class="left">固定宽度</p> <p class="right">自适应</p> </p>
說明：左邊的固定列設定為float:left，右邊的自適應列設定為float:none。
CSS：
* { margin: 0;padding: 0 }
.container {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
float: none;
width: 100%;
height: 100%;
background-color: #9dc3e6;
}說明：自適應列的width根據calc ()自動計算，如：父容器width - 固定列width。
瀏覽器支援：IE 9+。
CSS：
* { margin: 0;padding: 0 }
.container {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: #9dc3e6;
}##說明：父容器採用display: table和table-layout: fixed時，子容器會平分父容器的寬度，這時候固定某列的width，其餘的列會繼續平分剩下的寬度。
瀏覽器支援：IE 8+。
CSS：
* { margin: 0;padding: 0 }
.container {
position: absolute;
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
display: table-cell;
width: 100%;
height: 100%;
background-color: #9dc3e6;
}瀏覽器支援#：IE 10+。
CSS：
* { margin: 0;padding: 0 }
.container {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
.left {
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
flex: 1;
height: 100%;
background-color: #9dc3e6;
}<p class="container"> <p class="left">左侧定宽</p> <p class="mid">中间自适应</p> <p class="right">右侧定宽</p> </p>
說明：自適應列的width根據calc()自動計算，如：父容器width - 固定列width。
瀏覽器支援：IE 9+。
CSS：
* { margin: 0;padding: 0 }
.container {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: #72e4a0;
}
.mid {
float: left;
width: calc(100% - 100px - 100px);
height: 100%;
background-color: #9dc3e6;
}
.right {
float: left;
width: 100px;
height: 100%;
background-color: #4eb3b9;
}：在父元素設定display為flex時，其中一列的flex為1，其餘列都設定固定width。
瀏覽器支援：IE 10+。
CSS：* { margin: 0;padding: 0 }
.container {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: #72e4a0;
}
.mid {
float: left;
height: 100%;
flex: 1;
background-color: #9dc3e6;
}
.right {
float: left;
width: 100px;
height: 100%;
background-color: #4eb3b9;
}
建議閱讀：
在前端中的html基礎知識 vue外掛實作行動裝置輪播圖Css float的盒子模型position以上是CSS自適應佈局詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
