div左右布局

2022-07-17 19:27:11 字數 1203 閱讀 6007

一、左右定寬布局

在css分別指定了左右兩列的寬度的情況下,只需要將左邊的div 向左浮動,右邊的div 向右浮動,並清除浮動,即可實現。

常用的清除浮動有兩種方式:

a、通過在浮動元素的父級元素上新增清除浮動的class類:clearfix(見下面的css**部分);

b、通過在浮動元素後面新增乙個空元素,然後在這個空元素上定義clear:both來清除浮動;

二、不定寬布局

不定寬布局分為一邊不定寬和兩邊不定寬兩種形式,在實際運用中第二種情況是不會採用的,我們具體來分析一下一邊不定寬的左右布局方法,有以下兩種情況:

1、左邊定寬,右邊不定寬,左在上,右在下;( 左邊在右邊div的上邊)

遇到這種情況時,要將兩個div進行左右布局,與左右定寬布局的方法基本相同,只需要將左邊的div向左浮動,並清除浮動,右邊的div就會跟在已浮動的「div左」後面,即已經實現左右兩列布局了。

2、左邊定寬,右邊不定寬,左在下,右在上

將右邊div寫在上方,通常是希望在載入**內容時先顯示右邊的內容,這種情況在「左邊為選單,右邊是內容」的左右布局中經常用到。

總結幾點如下:

1)將右邊的div向右浮動,並設乙個負的margin-left;

2)在右邊div裡面增加乙個div,用於放右邊的內容,計算出左邊需要留出的寬度,並將此資料設定為該div的margin-left,如;

3)浮動後一定要在父級元素或後乙個元素上清除浮動;

三、示例**

下面我們通過乙個簡單的子例來了解一邊定寬、左下右上的結構是如何實現左右兩列布局的:

html**

上右我在右邊

右我在右邊

右我在右邊

右我在右邊

我在左邊

css**

/* reset */

*,body

/* commons */

body

.clearfix

.clearfix:after

#bd#bd .right

#bd .right .content

#bd .left

refer to:

左右div 高度對齊

left 用力撐開左邊div 用力撐開左邊div 用力撐開左邊div 用力撐開左邊div 用力撐開左邊div right 右邊div的高度也被撐高了吧 右邊div的高度也被撐高了吧 右邊div的高度也被撐高了吧 右邊div的高度也被撐高了吧 右邊div的高度也被撐高了吧 右邊div的高度也被撐高了吧...

html5的div左右布局方面問題 1

語句來做。經常有人問我如何使用標籤來做左邊和右邊排序 float left 我是左邊的div float left 我是緊鄰左邊的div 這段實現的 行實際上是利用了style float left 這個語句,效果圖如下 這段是沒必要擔心兩個欄位會重疊,它會自動判斷並且自行排序,也就是自動將第二段字...

頁面左右布局

例如 現有乙個頁面,需要左側200px,右側自適應頁面寬度。頁面 如下 import react,from react import styles from csslayout.less export default class csslayout extends component render ...