面試過程中總會文檔兩列布局，左邊等寬，右邊自適應(yīng)幾種方法？以下提供6種為君解憂

<div id="wrap"><div id="left"></div><div id="right"></div> </div>需求就是左側(cè)定寬，右側(cè)自適應(yīng)。（height先不用管） 方法一：雙inline-block #wrap{width: 100%;font-size: 0; } #left{width: 200px;height: 100px;display: inline-block; } #right{height: 100px;width: calc(100% - 200px);display: inline-block; }缺點：為消除html中空格的影響需要把父級的font-size設(shè)為0 如果兩邊高度不一樣，需要加vertical-align: top注意：calc表達式內(nèi)運算符兩邊要有空格方法二：雙float #left{float: left;width: 200px;height: 100px; } #right{float: left;height: 100px;width: calc(100% - 200px); }本方案和雙inline-block方案原理相同，都是通過動態(tài)計算寬度來實現(xiàn)自適應(yīng)。但是，由于浮動的block元素在有空間的情況下會依次緊貼，排列在一行，所以無需設(shè)置display: inline-block;，自然也就少了頂端對齊，空格字符占空間等問題。A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.缺點：父元素需要清除浮動方法三： float+margin-left #left{float: left;width: 200px;height: 100px; } #right{height:100px;margin-left: 200px; }上面兩種方案都是利用了CSS的calc()函數(shù)來計算寬度值。下面兩種方案則是利用了block級別的元素盒子的寬度具有填滿父容器，并隨著父容器的寬度自適應(yīng)的流動特性。block級別的元素會認為浮動的元素不存在，但是inline級別的元素能識別到浮動的元素。缺點：需要清除浮動,需要計算margin-left 方法四：absolute+margin-left #left{position: absolute;width: 200px;height: 100px; } #right{height: 100px;margin-left: 200px; }缺點：使用了絕對定位，若是用在某個div中，需要更改父容器的position。 方法五：float+BFC #wrap{overflow:hidden; } #left{width: 200px;height: 100px;float: left; } #right{height: 100px;margin-left: 0;overflow: auto; }這種方法同樣是利用了左側(cè)浮動，但是右側(cè)盒子通過overflow:auto;形成了BFC，因此右側(cè)的盒子不會被浮動的元素重疊。 缺點：父元素需要清除浮動。 方法六：flex布局 #wrap{display: flex; } #left{width: 200px;height: 100px; } #right{height: 100px;flex: 1; }

轉(zhuǎn)載于:https://www.cnblogs.com/LingXiangLi/p/10252873.html

總結(jié)

以上是生活随笔為你收集整理的两列布局：6种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。