這就是乙個三列等高布局的效果,運用了padding補償法,先上**:
dom結構:
css**"container">
"left">
fefwefew
wefwefwe
>
"right">
ewtfrweqrferq
ewtfrweqrferq
ewtfrweqrferq
ewtfrweqrferq
ewtfrweqrferq
>
下面我們來談一下原理,我們需要明白的是.container
.left,.center,.right
.left
.center
.right
overflow:hidden;
是根據什麼來界定的,也就是說怎麼樣就算超出了這個容器呢?(這裡所指的是沒有指定容器的高度)根據的是容易內元素的外邊距,看上面的**,我們首先給三個子div
增加padding-bottom
,使整個盒子的高度增加,於此同時,三個子div
的外邊距也在很遠很遠的位置,所以我們需要將margin-bottom
給拿上來,於是我們就做了乙個正負相抵的操作,這時我們的right
的底部外邊距與其本身content area
在同一基線上,也是由於right
的底部外邊距的這條基線位於最底部,所以父div
進行overflow
後得到我們想要的三列等高效果。 CSS 多列布局 三列布局
下面的 演示了3列布局的用法。html head title 三列布局 styletype text css body column1of3,column2of3,column3of3 body h1style color 706fd3 軟體開發,成就夢想 h2 ahref 學程式設計,上利永貞網 ...
CSS三列布局
1 使用float margin實現 class wrap class left 左列定寬div class center 中間定寬div class right 右列自適應div div wrap left center right 2 使用float overflow實現 right 3 使用t...
css三列布局
參考 兩個很好的方法解決這個問題 1 css2傳統方法,讓第乙個盒子左浮動,第二個盒子右浮動,且都設定好固定寬度,中間第三個盒子只設定一下高度,不要設定寬度或者設定寬度為auto,中間盒子就會去自適應寬度,看一下 這裡要絕對要注意的就是center這個盒子的margin left和margin ri...