原標題：詳解左右寬度固定中間自適應html布局解決方案

本文介紹了詳解左右寬度固定中間自適應html布局解決方案，分享給大家，具體如下：

a.使用浮動布局

html結構如下

leftrightcenter

//此處注意要先渲染左、右浮動的元素才到中間的元素。元素浮動后剩余兄弟塊級元素會占滿父元素的寬度

.box{

height:200px;

}

.left{

float:left;

width:300px;

}

.right{

float:right;

width:300px;

}

b.使用固定定位

html結構如下

leftrightcenter

//和浮動布局同理，先渲染左右元素，使其定位在父元素的左右兩端，剩余的中間元素占滿父元素剩余寬度。

.box{

position: relative;

}

.left{

position: absolute;

width: 100px;

left: 0;

}

.right{

width:100px;

position: absolute;

right: 0;

}

.center{

margin: 0 100px;

background: red;

}

c.表格布局

將父元素display:table，子元素display:table-cell，會將它變為行內塊。

這種布局方式的優點是兼容性好。

left

center

right

.box{

display: table;

width: 100%;

}

.left{

display: table-cell;

width: 100px;

left: 0;

}

.right{

width:100px;

display: table-cell;

}

.center{

width: 100%;

background: red;

}

d.彈性布局

父元素display：flex子元素會全部并列在一排。

子元素中flex:n的寬度會將父元素的寬度/n

如flex:1，寬度就等于父元素高度。

彈性布局的缺點是兼容性不高，目前IE瀏覽器無法使用彈性布局

left

center

right

.box{

display: flex;

width: 100%;

}

.left{

width: 100px;

left: 0;

}

.right{

width:100px;

}

.center{

flex:1;

}

e.網格布局

父元素display:grid;

grid-templatecolumns:100px auto 100px;

依次為第一個子元素寬100px 第二個自適應 第三個100px;

網格布局的優點是極為簡便，直接通過父元素樣式決定，缺點是兼容性不高。

left

center

right

.box{

display: grid;

grid-template-columns: 100px auto 100px;

width: 100%;

}

建站免費素材下載：sucaiq.com

如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對素材圈的支持！若你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。