來源 | http://www.fly63.com/article/detial/9541
一，什麼是兩列布局兩列布局分為兩個，一種是垂直定寬，右側自適應，另一種是兩列都自適應（即縱向寬度由子元素決定，右側補齊剩餘空間）。在css面試題裡面屬於常考題，也是一個前端開發工程師必須掌握的技能，下面將分別介紹實現方式。
二，頂端定寬，右側自適應如何實現？1、雙列直插式原理：兩個元素都設置dislpay：inline-block，為了消除HTML空間的影響，父元素的字體大小需要設置為0，正確匹配元素的寬度使用計算函數計算。如果兩個元素的高度不一樣，可以給元素設置vertical-align：top調整。缺點：由於父元素設置了font-size為0，子元素內文字不會顯示。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; font-size:0; } .left{ display: inline-block; width: 100px; height: 200px; background-color: red; vertical-align: top;
} .right{ display: inline-block; width: calc(100% - 100px); height: 400px; background-color: blue; vertical-align: top; }</style> </head> <body> <div> <div> <span>1234</span> </div> <div> <span>1234</span> </div> </div> </body></html>2、雙浮動原理：兩個元素設置浮動，右側自適應元素寬度使用calc函數計算<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%;
} .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ float: left; width: calc(100% - 100px); height: 400px; background-color: blue; }</style> </head> <body> <div> <div> <span> 123adadadddddddddddddddddddddddddddddddddddddddd </span> </div> <div></div> </div> </body></html>3、浮動+保證金原理：預設定寬元素浮動，右側自適應元素設置margin-left的值大於定寬元素的寬度即可<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%;
} .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; }</style> </head> <body> <div> <div> <p>1234</p> </div> <div> <p>1234</p> </div> </div> </body></html>4、浮動+ BFC原理：父元素設置溢出：隱藏，左側定寬元素浮動，右側自適應元素設置溢出：自動創建BFC缺點：前端元素的內容如果超過設定寬度會重疊到右側元素上。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; overflow: hidden; } .left{ float: left; width: 100px; height: 200px; background-color: red; } .right{ overflow: auto; height: 400px; background-color: blue; }</style> </head> <body> <div> <div>111111111111111111111111</div> <div>111111111111111111111111111111111111111111111</div> </div> <div></div> </body></html>5、絕對+左邊距原理：父元素相對定位，垂直元素絕對定位，右側自適應元素設置margin-left的值大於定寬元素的寬度<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; position: relative; } .left{ position: absolute; width: 100px; height: 200px; background-color: red; } .right{ margin-left: 100px; height: 400px; background-color: blue; }</style> </head> <body> <div> <div></div> <div></div> </div> </body></html>6、flex布局原理：父元素設置display：flex，自適應元素設置flex：1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; display: flex; } .left{ width: 100px; height: 200px; background-color: red; } .right{ flex: 1; height: 400px; background-color: blue; }</style> </head> <body> <div> <div></div> <div></div> </div> </body></html>三，左右兩端元素都自適應嚴格來說，並不算兩個元素都是適應，只是將上面的定寬替換由子元素撐開而已1、浮動+ BFC原理和上面一樣，只是稍微元素的寬度沒有設置，由子元素撐開2、table布局原理：父元素顯示：表格，垂直元素外圍用一個div包裝，該div設置顯示：表格單元格，寬度：0.1％（保證最小寬度），右側元素內部設置margin-right，右側元素設置顯示：table-cell。缺點：IE7及以下不支持，當display：tabletime，padding失效，父元素的line-height屬性失效，當display：table-cell時，margin無效。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ display: table; width: 100%;
} .box{ display: table-cell; width: 0.1%; } .left{ margin-right: 20px; background-color: red; height: 200px; } .right{ display: table-cell; background-color: blue; height: 300px; }</style> </head> <body> <div> <div> <div>126545453dddddddd453453453</div> </div> <div>12121</div> </div> </body></html>3、flex布局4、網格布局原理：父元素設置顯示：grid，grid-template-columns：auto 1fr;（這個屬性定義列寬，auto關鍵字表示由瀏覽器自己決定長度。fr是一個相對尺寸單位，表示剩餘空間做等分） grid-gap：20px（行間距）缺點：兼容性太差，IE11都不支持，谷歌57以上才可以。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ display:grid; grid-template-columns:auto 1fr; grid-gap:20px } .left{ background-color: red; height: 200px; } .right{ height:300px; background-color: blue; }</style> </head> <body> <div> <div>1111111111111111111111111</div> <div></div> </div> </body></html>