第一種：浮動布局實現

HTML：

這種方法我利用的就是浮動原理，左右定寬度分別進行左浮動和右浮動，此時主內容列（中間列沒有定度）主會自動插入到左右兩列的中間，最要注意的一點是，中間列一定要放在左右兩列的后面，如上面的html代碼所示，下面我們一起來看看其css樣式是怎么實現的

CSS：

效果如圖：

第二種：負的margin實現

HTML:

CSS:

這里先讓’main’浮動，因為浮動存在包裹性所以后面緊跟著width的100%來保證其充滿整個body，并且左右空出230px的距離預留給左右定寬的兩列。’left’元素給予左浮動，因為此時它已經被擠到第二行，所以給予一個’margin-left’為負的100%讓其向左偏移回到第一行且正好填補’main’留下的230px的定寬間距(注意這里margin-left/right的百分比都是根據父容器的寬度來決定)。那么’right’便是同樣的道理

效果：

第三種：CSS3 Flexbox實現

HTML:

CSS:

效果：

總結

以上是生活随笔為你收集整理的CSS之中间固定两边自适应宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

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