在這裡,先想說一下div
布局和table
布局孰優孰劣的問題,個人覺得其實不是說div
布局就一定要好於table
。個人感覺最外層的布局用table
蠻不錯的,就是**過多,眼暈,沒別的壞處。
言歸正傳,假設想用布局乙個固定寬的的**,應該怎樣去做?div
是「塊」元素,每個div
預設都會佔據一行的,如果要用div
進行布局的話,我們首先要做的就是使div
可以橫向排列。這通過設定float
為left
實現的。
我們可以簡單的來試驗一下:
第乙個
第二個
看,兩個div
緊挨著排列起來了。
接下來呢?還有啥要做的呢?
我們需要div
能夠自動擴充套件才行,更多的情況下,為了布局美觀,我們還需要給div
指定乙個最小的高度。因為在瀏覽器中,指定了高度div
是不隨著裡面內容的增加擴充套件的,我們需要設定上min-height
這樣的屬性,這時為了在ie6
下也能夠使用,我們還需要增加乙個ie
專用高度:_height。
這樣,就可以完美的進行豎向自動擴充套件了。
請注意,這裡的說的是自動擴充套件,而不是自動充滿,關於讓div
自動充滿整個頁面的方法,請參見我的其他文章。
還有啥要做的呢,由於對內部div
指定了float
,此時的外部div
就不能夠自動擴充套件了,我們需要在後面增加乙個div
,設定clear
屬性為both
,以便於清除浮動。這時,一切ok了!
最後,我們還要使頁面居中展示,一般對於固定寬的的頁面都會這樣設定,對稱嘛。
我們需要在body
上增加text-align:center
樣式以及在最外部的div
上增加margin-left: auto;margin-right: auto;width:604px;
即可。
全部**如下。很簡單吧。
第乙個第乙個
第乙個第乙個
第乙個第乙個
第乙個第乙個
第乙個
第二個第二個
第二個
當然,這個例子還是比較簡陋的,可以參照我的** www.txstory.com
的首頁面來看一下用div布局的實際效果,非美工出品,比較簡陋,請多包涵
div(固定寬度和不固定寬度)居中顯示的方法總結
今天我總結一下css實現div居中的方法,有的是固定寬度的,還有的是不固定寬度的。1.使用自動外邊距實現div css居中 css中首選的讓元素水平居中的方法就是使用margin屬性 將元素的margin left和margin right屬性設定為auto即可。在實際使用中,我們可以為這些需要居中...
div(固定寬度和不固定寬度)居中顯示的方法總結
1.使用自動外邊距實現div css居中 css中首選的讓元素水平居中的方法就是使用margin屬性 將元素的margin left和margin right屬性設定為auto即可。在實際使用中,我們可以為這些需要居中的元素建立乙個起容器作用的div。需要特別注意的一點就是,必須為該容器指定寬度 1...
網頁布局(左邊固定寬度)
123 7353637 38看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口 3940 看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口...