一. 兩列布局：左側定寬、右側自適應。
四種方法 ：flex 、position、float和負外邊距、外邊距
1. 使用flex.
右側自適應區塊
左側定寬200px區塊
2. 使用position， 考慮了頁面優化，右側區域先載入。
右側自適應區塊
左側定寬200px區塊
3. 利用float和負外邊距
這裡的100%是相對于父元素, margin-left的意思是子元素的左邊框距離父元素右邊框的距離，我這裡沒考慮padding,border等因素哈
當設定left元素的margin-left:-100%;時，left元素的左邊框會與父元素的左邊框重合。
右側自適應區塊
左側定寬200px
二、三列布局：左右定寬，中間自適應。
聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。
三種方法：flex、絕對定位、使用負外邊距。
1. flex
center
left
right
2. 絕對定位
中間左列
右列
三、兩列等高布局。
利用padding-bottom的正值與margin-bottom的負值相互抵消即可，同時最外層設定overflow:hidden;即可
left
right
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...
兩列自適應布局
要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...
兩列布局 兩列寬度均自適應）
公司專案需要使用兩列布局，要求左右列寬度自適應，左列高度隨著內容自動出現滾動條，網上的方案有很多種，研究了一下採用float bfc的解決方案。最終實現效果如圖 原理 浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量佔滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。若浮動元素的塊狀兄弟元素為bfc，則不...