大的DIV中放兩個小的DIV一左一右

時間 2021-10-30 06:36:53

1樓:

1、首先如圖所示的web結構即一個html和css即可實現。

2、開啟html頁面 定義一個大的div和兩個小div 如圖所示。

3、最常用的float浮動,只要兩個小div的寬度小於等於大div的寬度,即可實現並排了。

4、使用position進行絕對定位,然後使用margin-left除去第一個小div的寬度即可。

5、使用table盒子實現div並排,這個是等寬的。

6、如圖所示 這是上面三個方法執行後的結果圖,可以看到一個大的div中巢狀兩個小的div。

擴充套件資料

定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制,即設定要素的寬度。div

瀏覽器接到這項規則時,它將文字按照規則規定的效果顯示,還將段落的最大水平尺寸限制在150畫素。

寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位,或使用比例值設定寬度,比例值指相對於母體要素的比例。

ie 4中,這項屬性還可用於影象。你可以通過寬度設定人為地拉寬或壓縮影象。利用css,你可以隱藏要素,使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。

值 inherit 為預設值。這使單元繼承父單元的可見性。所以,如果某一段是隱藏的,則它包含的任何行間單元也都被隱藏。

這一繼承性可被明確指定的可見性取代。例如,段內的 em 單元被指定為可見,這時如果該段被隱藏,則段內的所有其它內容都將消失,而唯有 em 單元中的文字是可見的。

當一個要素被隱藏後,它仍然要佔據瀏覽器視窗中的原有空間。所以,如果你將文字包圍在一幅被隱藏的影象周圍,那麼,其顯示效果將是文字包圍著一塊空白區域。

這條屬性在編寫語言和使用動態html時很有用,比如你可以使某段落或影象只在滑鼠滑過時才顯示。

特性 z-index 用於堆疊螢幕上的單元。預設情況下,單元堆疊的順序為它們在html標記出現的順序——也就是說,後出現單元堆疊在早出現單元的上面。z-index 特性實際上定義同屬(sibling)單元的堆疊順序以及單元相對父單元的堆疊。

按照規範草案,具有正 z-index 值的單元群都堆疊在父單元之上,它們自己的堆疊順序則按其取值的大小來決定(值大的單元在上層)。

同樣,具有負 z-index 值的單元群都堆疊在父單元之下,它們自己的堆疊順序也按取值的大小來定(值大的單元在上層,例如值為 -1 的單元在值為 -2 的單元的上面)。

該引數值使用純整數。z-index用於絕對定位或相對定位了的要素。你也可以給影象設定z-index。

(對於communicator,最好將 標籤包在[font]或 標籤內,然後將z-index應用到[font]或 。)

2樓:匿名使用者

20. 在子容器加了浮動屬性後,該容器將不能自動撐開解決方法:在標籤結束後下一個標籤中加上一個清除浮動的css clear:both;

21. 浮動後ie6解釋外邊距為實際邊距的雙倍解決辦法:加上display:inline22. ie6下**下方會有空隙

解決辦法:為img加上display:block或設定vertical-align 屬性為vertical-align:

top | bottom |middle |text-bottom

23. ie6下兩個層中間有空隙

解決辦法:設定右側div也同樣浮動float:left或者相對ie6定義 margin-right:-3px;

3樓:匿名使用者

兩個div要並列,這兩個div必須都要float。

你的css .left 這個沒有float,所以會下掉。

4樓:百小度

浮動ie產生的雙倍距離!這是一個比較有名的ie bug。用display:inline;

5樓:

左邊的div加個float:left;display:inline;通常margin-left和margin-right在ie6下面都會產生雙倍間距的,所以要用display:

inline;

6樓:匿名使用者

小的加一行:

float:left;

7樓:匿名使用者

只針對你問的這個問題

首先就像一樓熱心網友說的, 小的也就是左邊那個要加float:left; 其次總寬度是超的,你有一個margin-left:50px 這個值是要算進去的.

仍有疑問的話追問吧

一個大的div中巢狀兩個小的div一左一右

8樓:情談學長

大的div中巢狀兩個小的div一左一右步驟如下:

1,首先,圖中顯示的web結構是html和css。

2,開啟html頁面,如圖所示,定義一個大div和兩個小div。

3,最常用的float float,只要兩個小div的寬度小於或等於大div的寬度,就可以並排實現。

4,使用position進行絕對定位,然後使用margin-left刪除第一個小div的寬度。

5,使用**框並排實現div,這是相同的寬度。

6,如圖所示,這是上面三種方法執行後的結果,可以看到兩個大div巢狀在一個大div中。

9樓:依然特雷西

1、首先如圖所示的web結構即一個html和css即可實現。

2、開啟html頁面 定義一個大的div和兩個小div 如圖所示。

3、最常用的float浮動,只要兩個小div的寬度小於等於大div的寬度,即可實現並排了。

4、使用position進行絕對定位,然後使用margin-left除去第一個小div的寬度即可。

5、使用table盒子實現div並排,這個是等寬的。

6、如圖所示 這是上面三個方法執行後的結果圖,可以看到一個大的div中巢狀兩個小的div。

10樓:

1 你可以讓左邊最大的div左邊浮動,然後讓右邊的div 右邊浮動就可以了。

.left

.right

2 你可以讓左邊的div和右邊的div都向左浮動。即都加上float:left;

3 你可以讓左邊的div和右邊的div都向右浮動。即都加上float:right;(注:先寫右邊div的**,然後在寫左邊的)

推薦用第一種方法 。

一個大div下套了兩個小div左浮動,兩個小div怎麼預設寬度自動鋪滿

11樓:

這個就涉及到div的自適應了,比如你的低階div是600px 高是300px,那麼就可以這樣寫:

#div

.zi_div

.zi_div2

這樣的操作是把子div設定成塊元素,50%就 是300px,那麼兩個就剛好是600px,高的話就直接和父級一樣,而且子元素不會受父div的大小影響,希望採納謝謝。

大的div中巢狀兩個小的div一左一右

情談學長 大的div中巢狀兩個小的div一左一右步驟如下 1,首先,圖中顯示的web結構是html和css。2,開啟html頁面,如圖所示,定義一個大div和兩個小div。3,最常用的float float,只要兩個小div的寬度小於或等於大div的寬度,就可以並排實現。4,使用position進行...

css如何讓兩個div並排,div1左對齊,div2對齊di

戰歌 一 使用css float並排顯示 我們對div設定一個float浮動屬性即可解決不併排顯示,只要你的並排div盒子總寬度小於或等於最外層盒子寬度即可實現多個div物件並排顯示。這裡我們對div通設一個浮動,當然實際使用時候,要通排顯示div物件的加入css類,我們就對要同行顯示css選擇器設...

DIV CSS佈局問題,我們想讓兩個DIV標籤並排,為

假設 apdiv1是外面的層,apdiv2,apdiv3是裡面的,給apdiv2,apdiv3 設定浮動為左就可以了,還有當apdiv2的寬度加上apdiv3的寬度大於apdiv1的寬度是,apdiv3會跑到apdiv2下面,這時可以改它們的寬度。apdiv1 apdiv2 apdiv3 您把下面的...