DIV CSS 網頁一行兩列背景自適應

2022-09-25 22:03:09 字數 726 閱讀 9778

網頁布局中常有的一種情況就是網頁主體部分分成一行兩列;而在很多種情況下,設計師們常把左右兩列的背景色設計成不同色彩,以實現內容塊的明顯區分;但這樣的設計給布局提出了乙個看似簡單,而實現非常難的問題;那就是左右兩列怎麼樣實現背景高度自適應,及左邊內容高於右邊時,右邊背景色也要和左邊一樣;右邊內容高於左邊時,左邊背景色也要和右邊一樣;

當年為了實現這個,我在網上查過無數的文章,都沒有很好的解決方案;多數人用很大的負數實現,也有人用j**ascript實現; 後來因為感覺這樣實現不合理,所以我一直用**來實現; 因為這樣最簡單; 但今天同事問起我這個問題,我中午仔細想了想;想出了乙個解決辦法,寫出來和大家分享;

基本原則:

1、布局要合理,不能為了實現這樣的效果而使html的**變得臃腫;

2、css部分也要簡單巧妙實現,不能為了這樣的效果而寫大量的**;而主要的還是瀏覽器相容方面要沒有問題;

以下是我實現的**,說明一下,這樣的布局還不是很理想;但這已是我暫時能想到的最好解決辦法了;

實現方法一:左邊用邊框,右邊用背景色;

這個方法是左邊用200px的邊框來實現一列的背景,再用這個標籤的實際背景色來實現另一列的背景,這樣左右永遠都是一樣高的;

程式**

right

right

left

程式**

right

right

left

right

right

left

DIV CSS三行兩列經典布局

師阿捷2004年發布在 網頁設計師 上的,乙個非常經典的布局,在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...

MySQL實現把兩行兩列資料合併為一行一列

最近在oa專案中使用acitiviti中,遇到乙個排他閘道器有多個判斷條件 並且可以多次執行,在顯示已辦任務的時候要歸屬為一條資料,利用group concat和concat加上group by 解決。詳細sql如下 select aht.id as id,ard.name as processna...

pyspark列合併為一行

將dataframe利用pyspark列合併為一行,類似於sql的group concat函式。例如如下dataframe s d abcd 123 asd 123 需要按照列相同的列d將s合併,想要的結果為 d newcol 123 abcd,xyz code from pyspark.sql i...