欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實例:CSS實現(xiàn)的等高網(wǎng)頁布局

互聯(lián)網(wǎng)   發(fā)布時間:2009-04-02 19:33:56   作者:佚名   我要評論
網(wǎng)頁制作Webjx文章簡介:為了讓網(wǎng)頁更美觀、協(xié)調(diào),有的時候需要用到左右等到布局,傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的,現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等高布局。 為了讓網(wǎng)頁更美觀、協(xié)調(diào),有的時候需要用到左

為了讓網(wǎng)頁更美觀、協(xié)調(diào),有的時候需要用到左右等到布局,傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的,現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等高布局。
為了讓網(wǎng)頁更美觀、協(xié)調(diào),有的時候需要用到左右等到布局,傳統(tǒng)的等高布局是用 javascript 實現(xiàn)的,現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實現(xiàn)的等高布局,其方法主要是采用“隱藏容器溢出”、“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法實現(xiàn)的。
下面來看看實際的例子(三列等高),以下面的 XHTML 代碼為例: <div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……(20個或更多個)
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
CSS 代碼: *{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
從效果中可以看到,左右兩列雖然內(nèi)容少,但高度和內(nèi)容最多的中間列等高。其核心代碼(拿本例來說)是: #wrap{
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
其中的 10000px 可以修改為其他值,但不能小于最高列的高度。
經(jīng)測試,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。
方法很簡單吧。從這里可以看出:看似簡單的 CSS,其實并不簡單。
======= 華麗的分割線(2009/02/18) ==================================
前兩天做網(wǎng)頁的時候運用這樣方法發(fā)現(xiàn)一個問題:如果子列有邊框 border 屬性的話,下邊框不會將不顯示。因為他們下面還有很長一部分,都被隱藏了,看圖理解:

半透明部分都被隱藏了,所以看不到下邊框。

相關(guān)文章

  • css設(shè)置多列等高布局的方法示例

    這篇文章主要介紹了css設(shè)置多列等高布局的方法示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-21
  • 前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧

    我們在寫頁面的時候,有的時候會遇到多欄布局,這篇文章主要介紹了前端應(yīng)該掌握的CSS實現(xiàn)多列等高布局技巧,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟
    2018-06-05
  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

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

    下面小編就為大家?guī)硪黄獪\析CSS等高布局的6種方式。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-04
  • 用CSS實現(xiàn)三列DIV等高布局以傳達(dá)更好的視覺效果

    頁面布局中經(jīng)常遇到等高布局的情況,為了得到更好的視覺效果,就要實現(xiàn)DIV等高布局的效果。以最普遍的DIV三列布局來說
    2014-09-03
  • 多列等高的CSS實現(xiàn)代碼

    這種情況下就需要兩列的高度保持一致了,左邊高度增加,右邊也跟著增加,右邊高度增加,左邊同樣也要增加,否則就會出現(xiàn)“斷層”的效果,接下來將介紹多列等高的實現(xiàn)方法,
    2012-12-03
  • CSS 三欄等高布局實現(xiàn)方法

    CSS網(wǎng)頁布局實例:三欄等高布局.
    2009-08-29
  • CSS實例:三列等高布局-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)

      三列等高CSS布局的一個實例,   修改國外的一個demo,   兼容到了IE5.5 和標(biāo)準(zhǔn)的瀏覽器OperaFirefoxSafari。   不過hack太多,不是很喜歡這樣做。 全部代碼如下
    2008-10-17
  • css多種方式實現(xiàn)等高布局的示例代碼

    本文講的等高布局是在不手動設(shè)置元素高度的情況下,使用純css實現(xiàn)各個元素高度都相當(dāng)?shù)男Ч?,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看
    2019-01-09

最新評論