公共樣式
我是左側，固定寬度為100px
我是右側，寬度自適應，多多指教
.left-float
.right-margin
.container-float // 父元素清除浮動
缺點：需要清除浮動
需要計算右側盒子的margin-left
.float // 子元素
.container-clearfix // 父元素清除浮動
.calc-right // 右側元素
缺點：需要知道左側盒子的寬度，兩個盒子的距離，還要設定各個元素的box-sizing。
父元素需要清除浮動
.positon-left
.right-margin
缺點:使用了絕對定位，若是用在某個div中，需要更改父容器的position。
沒有清除浮動的方法，若左側盒子高於右側盒子，就會超出父容器的高度。因此只能通過設定父容器的min-height來放置這種情況
.container-flex
.left-flex
.right-flex
**簡潔，一般推薦這種寫法
缺點：ie低瀏覽器的相容性不是很好，不過現在ie瀏覽器在整個瀏覽器的市場份額不是很大，用google瀏覽器比較多，除非公司有特殊要求要相容低版本ie
.container-grid
.left-grid, .right-grid
.left-grid
.right-grid
這種新的布局方式跟flex布局有些類似，可以試著用下，不懂得話，可以看阮一峰的教材
.inline-block
.container-block
.inline-right
缺點：需要知道左側盒子的寬度，兩個盒子的距離，還要設定各個元素的box-sizing
需要消除空格字元的影響
需要設定vertical-align: top滿足頂端對齊
.container-bfc
.bfc-left
.bfc-right
缺點：父元素需要清除浮動
css左邊固定，右邊自適應
lang en charset utf 8 title head class container class left div class right div div body html 方法1 左邊div使用float left left right style 方法2 將外部容器div設定dis...
css 布局小技巧 左邊固定右邊自適應
在頁面布局或者是列表布局中，我們經常出現乙個場景 左邊是固定寬度的盒子，右邊自適應 divclass product open labelclass label open product label 這一列是固定寬度 ulclass check game 這一列自適應 li label inputt...
兩欄布局，左邊固定寬度，右邊自適應
no.1 使用浮動 float left right use float left use float right 實現效果 no.2 使用浮動 flex left right use flex use flex flex left use flex flex right 實現效果 no.3 使用浮...