亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用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代碼：

復(fù)制代碼
代碼如下:

<div id="container">
<div id="left">
<p>左側(cè)</p>
<p>左側(cè)</p>
<p>左側(cè)</p>
<p>左側(cè)</p>
<p>左側(cè)</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>右側(cè)</p>
<p>右側(cè)</p>
<p>右側(cè)</p>
</div>
</div>

CSS代碼：

復(fù)制代碼
代碼如下:

#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; }

相關(guān)文章

  • 一文匯總 CSS 兩列布局和三列布局的具體使用

    這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小
    2020-06-28

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS實現(xiàn)頁面兩列布局與三列布局的方法示例

    這篇文章主要介紹了CSS實現(xiàn)頁面兩列布局與三列布局的方法示例,包括寬度與高度的自適應(yīng)的示例,需要的朋友可以參考下
    2016-06-23

  • CSS三列布局的多種表現(xiàn)形式

    本文為大家詳細介紹三列布局，分為兩側(cè)定寬中間自適應(yīng)、兩列定寬一側(cè)自適應(yīng)、中間定寬兩側(cè)自適應(yīng)、一側(cè)定寬兩列自適應(yīng)和三列自適應(yīng)五種情況，感興趣的小伙伴們可以參考一下
    2016-05-04

  • CSS三列布局兩端固定寬度中間自適應(yīng)

    CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個不錯的示例，大家可以參考下
    2014-02-27

  • CSS教程：三列固定網(wǎng)頁布局實例

    網(wǎng)頁制作Webjx文章簡介：我們的講解會包含一些標(biāo)準(zhǔn)元素，如logo、頂欄、導(dǎo)航欄、文本區(qū)域、 　　今天網(wǎng)頁教學(xué)網(wǎng)將向大家講解如何通過設(shè)計一個HTML/CS
    2009-04-02

  • 詳解CSS多種三列自適應(yīng)布局實現(xiàn)

    這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2021-02-24

最新評論