左右兩側元素都自適應
嚴格來講，並不算兩個元素都是自適應，只是將上面的定寬改為由子元素撐開而已
1.浮動+bfc
原理和上面一樣，只是左側元素的寬度沒有設定，由子元素撐開
2.table布局
原理：父元素display:table,左側元素外圍用乙個div包裹，該div設定display:table-cell，width:0.1%（保證最小寬度），左側元素內部設定margin-right，右側元素設定display:table-cell。
缺點：ie7及以下不支援，當display:table時，padding失效，父元素的line-height屬性失效，當display:table-cell時，margin失效。
3.flex布局 原理、缺點同上面的flex布局
4.grid布局
原理：父元素設定display：grid，grid-template-columns:auto 1fr;（這個屬性定義列寬，auto關鍵字表示由瀏覽器自己決定長度。fr是乙個相對尺寸單位，表示剩餘空間做等分）grid-gap:20px（行間距）
缺點：相容性太差，ie11都不支援，谷歌57以上才可以
1111111111111111111111111
亞馬遜測評 www.yisuping.com
CSS兩列布局
在布局中，我們常常需要出現兩列的情況，其中左邊一列固定寬度，右邊一列隨著瀏覽器寬度變化而變化。如何實現呢？傳統的方法是利用float將左部分浮動起來，再通過margin將右部分右移，得到所需效果，如下 css 如下 color blue color yellow background color b...
CSS兩列布局
兩列布局 一列定寬，一列自適應，列等高 1class parent 2 class left 3 leftp 4 div 5 class right 6 rightp 7 rightp 8 div 9 div 1.用table table cell實現兩列布局 一列定寬，一列自適應，且table是自...
CSS布局之兩列布局
兩列布局兩列布局一般情況下是指定寬與自適應布局，兩列中左列是確定的寬度，右列是自動填滿剩餘所有空間的一種布局效果 左列自適應,右列定寬 方案一 float margin 屬性實現 left right inner 優點 實現方式簡單 缺點 自適應元素 margin 屬性值需要與定寬元素的 width...