乙個等高布局的小例項

2022-05-09 08:15:08 字數 1365 閱讀 6956

**如下:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>等高布局——會員中心頁面比較常用

title

>

<

style

>

body

.container

.leftbox

.rightbox

style

>

head

>

<

body

>

<

h3 style

="text-align:center;"

>等高布局小例項

h3>

<

div

class

="container"

>

<

div

class

="leftbox"

>我是左側內容

div>

<

div

class

="rightbox"

>

<

p>我是右側內容

p>

<

p>現在我這邊的內容比左邊多,所以就比左側高

p>

<

p>但是left用了padding-bottom補償了這部分高度

p>

<

p>所以就實現了等高布局

p>

div>

<

div

style

="clear:both"

>

div>

div>

body

>

html

>

等高布局有幾種不同的方法,但目前為止我認為瀏覽器相容最好最簡便的應該是padding補償法。首先把列的padding-bottom設為乙個足夠大的值,再把列的margin-bottom設乙個與前面的padding-bottom的正值相抵消的負值,父容器設定超出隱藏,這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度,當它裡面的任一列高度增加了,則父容器的高度被撐到它裡面最高那列的高度,其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間裡的,而且邊框也是跟隨padding變化的,所以就成功的完成了乙個障眼法。

CSS例項 CSS實現的等高網頁布局

為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發...

php登入的乙個小例項

花了一下午的時間寫了乙個php登入的小例項,雖然花費了太長的時間,但是還是感覺很有成就感,相信 一切偉大的行動和思想都有乙個微不足道的開始。首先做登入頁面 login.php,如下 session start if isset post sub and password 在資料庫中查詢選擇的使用者 ...

CMFCColorButton的乙個例項

在vs08和10中發現多了控制項,mfccolorbutton 新增了乙個到了乙個對話方塊,試執行一下,發現效果不錯 可以選擇rgb所有的顏色,可以說功能很強大了,而且自動是彈出式的,這些功能的實現都不用編寫一行 可謂是十分方便 但悲催的是,搜尋這個控制項的用法,是在少之又少,唯一乙個比較有效的還是...