2023年08月19日 星期四 上午 10:04
常見的左右兩列div+css布局分為以下兩種：
一、左右定寬布局：
在css分別指定了左右兩列的寬度的情況下，只需要將左邊的div 向左浮動，右邊的div 向右浮動，並清除浮動，即可實現。
常用的清除浮動有兩種方式：
a、通過在浮動元素的父級元素上新增清除浮動的class類：clearfix(見下面的css**部分)；
b、通過在浮動元素後面新增乙個空元素，然後在這個空元素上定義clear:both來清除浮動；
二、不定寬布局：
不定寬布局分為一邊不定寬和兩邊不定寬兩種形式，在實際運用中第二種情況是不會採用的，我們具體來分析一下一邊不定寬的左右布局方法，有以下兩種情況：
1、左邊定寬，右邊不定寬，左在上，右在下；(此處的上和下是指在html**中從上到下編寫順序中的位置，下文皆同)
遇到這種情況時，要將兩個div進行左右布局，與左右定寬布局的方法基本相同，只需要將左邊的div向左浮動，並清除浮動，右邊的div就會跟在已浮動的「div左」後面，即已經實現左右兩列布局了。
2、左邊定寬，右邊不定寬，左在下，右在上；
將右邊div寫在上方，通常是希望在載入**內容時先顯示右邊的內容，這種情況在「左邊為選單，右邊是內容」的左右布局中經常用到。
總結幾點如下：
1）將右邊的div向右浮動，並設乙個負的margin-left；
2）在右邊div裡面增加乙個div，用於放右邊的內容，計算出左邊需要留出的寬度，並將此資料設定為該div的margin-left，如；
3）浮動後一定要在父級元素或後乙個元素上清除浮動；
三、示例**：
下面我們通過乙個簡單的子例來了解一邊定寬、左下右上的結構是如何實現左右兩列布局的：
">
上 右我在右邊
右我在右邊
右我在右邊
右我在右邊
我在左邊
下
DIV CSS三行兩列經典布局
師阿捷2004年發布在 網頁設計師 上的，乙個非常經典的布局，在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...
DIV CSS左右列高度自適應問題
我們在用div css布局網頁的時候，必然會遇到左右兩列自適應高度的問題，就是左邊列的背景會隨著右邊列內容的增加也相應的增加高度，下面就教大家div css左右兩列自適應高度的方法。下面給出最終的效果圖 具體 如下所示 左側內容1 右側內容1 右側內容2 右側內容3 說明 其實解決div css左右...
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...