南順網絡
詳解左右寬度固定中間自(zì)适應html布局解決方案
本文介紹了詳解左右寬度固定中間自(zì)适應html布局解決方案，分享給大家，具體如(rú)下：
a.使用浮動布局
html結構如(rú)下
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
//此處注意要先渲染左、右浮動的(de)元素才到中間的(de)元素。元素浮動後剩餘兄弟塊級元素會占滿父元素的(de)寬度
<style>
.box{
height:200px;
}
.left{
float:left;
width:300px;
}
.right{
float:right;
width:300px;
}
</style>
html結構如(rú)下b.使用固定定位
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
//和(hé)浮動布局同理(lǐ)，先渲染左右元素，使其定位在父元素的(de)左右兩端，剩餘的(de)中間元素占滿父元素剩餘寬度。
<style>
.box{
position: relative;
}
.left{
position: absolute;
width: 100px;
left: 0;
}
.right{
width:100px;
position: absolute;
right: 0;
}
.center{
margin: 0 100px;
background: red;
}
</style>
将父元素display:table，子(zǐ)元素display:table-cell，會将它變為(wèi)行內(nèi)塊。c.表格布局
這種布局方式的(de)優點是兼容性好。
<div class="box">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<style>
.box{
display: table;
width: 100%;
}
.left{
display: table-cell;
width: 100px;
left: 0;
}
.right{
width:100px;
display: table-cell;
}
.center{
width: 100%;
background: red;
}
</style>
父元素display：flex子(zǐ)元素會全部并列在一(yī)排。d.彈性布局
子(zǐ)元素中flex:n的(de)寬度會将父元素的(de)寬度/n
如(rú)flex:1，寬度就等于父元素高(gāo)度。
彈性布局的(de)缺點是兼容性不高(gāo)，目前IE浏覽器無法使用彈性布局
<div class="box">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<style>
.box{
display: flex;
width: 100%;
}
.left{
width: 100px;
left: 0;
}
.right{
width:100px;
}
.center{
flex:1;
}
</style>
父元素display:grid;e.網格布局
grid-templatecolumns:100px auto 100px;
依次為(wèi)子(zǐ)元素寬100px 第二個自(zì)适應 第三個100px;
網格布局的(de)優點是極為(wèi)簡便，直接通過父元素樣式決定，缺點是兼容性不高(gāo)。
<div class="box">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<style>
.box{
display: grid;
grid-template-columns: 100px auto 100px;
width: 100%;
}
</style>
編輯:--ns868
