由於設計頁面需要,要把兩個併排顯示的div實現一樣高的效果,n行n列布局,每列高度(事先並不能確定哪列的高度)的相同,是每個設計師追求的目標。方法有以下幾種:1、js實現(判斷2個div高);2、純css方法;3、加背景實現。首先說下本部落格實現的2個div一樣高的方法(即js方法)。
div+css基本布局:
1、js實現div自適應高度
**如下:
(注:網上公布了不少方法,但**或多或少有錯;上面的是無錯**;我測試在ie6.0/ie7.0下通過,考慮絕大數人仍然用的是ie,所以並沒有在opera和firefoxs下除錯,哪位用的是opera或ff,可以幫忙看看飄易部落格的div是否保持了一致的高度。)
2、純css方法
css裡**(除錯通過,但不會顯示div下邊框,即border-bottom):
/*左右自適應相同高度start*/
#m1,#m2
@media all and (min-width: 0px)
#m1:before, #m2:before
}/*左右自適應相同高度end*/
3、加背景
這個方法,很多大**在使用,如163,sina等。
xhtml**:
這是第一列
這是第二列
css**:
#wrap
#column1
#column2
.clear
讓兩列Div一樣高(自適應高度)
由於設計頁面需要,要把兩個併排顯示的div實現一樣高的效果,n行n列布局,每列高度 事先並不能確定哪列的高度 的相同,是每個設計師追求的目標。方法有以下幾種 1 js實現 判斷2個div高 2 純css方法 3 加背景實現。首先說下本部落格實現的2個div一樣高的方法 即js方法 div css基本...
讓兩個Div併排顯示
一 使用display的inline屬性 aaaa bbbb 二 通過設定float來讓div併排顯示 1111 2222 2222 2222 三 對於兩個div併排,左邊為絕對寬度,右邊為相對寬度的,需要用到這種布局的情況比較多見,如左邊為導航,右邊為內容的頁面 1 將最大的容器padding l...
讓兩個Div併排顯示
一 使用display的inline屬性 html divstyle width 300px height auto float left display inline aaaa div divstyle width 300px height auto float left display inli...