用CSS實現(xiàn)三列DIV等高布局以傳達更好的視覺效果
發(fā)布時間：2014-09-03 09:24:40 作者：佚名 
我要評論
我要評論頁面布局中經(jīng)常遇到等高布局的情況，為了得到更好的視覺效果，就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說
頁面布局中經(jīng)常遇到等高布局的情況，特別是在擁有背景顏色或背景圖片的情況下，為了得到更好的視覺效果，就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說，想實現(xiàn)三列等高布局，可以借助“overflow”、“padding”和“margin”三個屬性來實現(xiàn)。代碼如下：
HTML代碼：
<div id="container">
<div id="left">
<p>左側</p>
<p>左側</p>
<p>左側</p>
<p>左側</p>
<p>左側</p>
</div>
<div id="center">
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
</div>
<div id="right">
<p>右側</p>
<p>右側</p>
<p>右側</p>
</div>
</div>
CSS代碼：
#container{ overflow:hidden; width:1024px; margin:0 auto; }
#left, #center, #right { margin-bottom:-1000px; padding-bottom:1000px; }
#left { float:left; width:200px; background:#ccc; }
#center { float:left; width:400px; background:#bbeeeb; }
#right { float:right; width:200px; background:#555; }
HTML代碼：
復制代碼
代碼如下:<div id="container">
<div id="left">
<p>左側</p>
<p>左側</p>
<p>左側</p>
<p>左側</p>
<p>左側</p>
</div>
<div id="center">
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
<p>中間</p>
</div>
<div id="right">
<p>右側</p>
<p>右側</p>
<p>右側</p>
</div>
</div>
CSS代碼：
復制代碼
代碼如下:#container{ overflow:hidden; width:1024px; margin:0 auto; }
#left, #center, #right { margin-bottom:-1000px; padding-bottom:1000px; }
#left { float:left; width:200px; background:#ccc; }
#center { float:left; width:400px; background:#bbeeeb; }
#right { float:right; width:200px; background:#555; }
相關文章
這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-06-28利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 這篇文章主要介紹了CSS實現(xiàn)頁面兩列布局與三列布局的方法示例,包括寬度與高度的自適應的示例,需要的朋友可以參考下2016-06-23
- 本文為大家詳細介紹三列布局，分為兩側定寬中間自適應、兩列定寬一側自適應、中間定寬兩側自適應、一側定寬兩列自適應和三列自適應五種情況，感興趣的小伙伴們可以參考一下2016-05-04
- CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應結構，下面有個不錯的示例，大家可以參考下2014-02-27
- 網(wǎng)頁制作Webjx文章簡介：我們的講解會包含一些標準元素，如logo、頂欄、導航欄、文本區(qū)域、 今天網(wǎng)頁教學網(wǎng)將向大家講解如何通過設計一個HTML/CS2009-04-02
這篇文章主要介紹了詳解CSS多種三列自適應布局實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2021-02-24