兩個div橫向排列,頂端對齊的方式。

2021-09-02 20:59:33 字數 1967 閱讀 4170

1、左右兩個div都設定為float:left,如果右邊div沒有設定寬度,右邊div的寬度會根據div裡的內容自動調整。

i am left

i am right

2、只有左側div設定為float:left,右側div設定overflow:auto;,右側div將會佔據整個右側剩餘寬度。

i am left

i am right

3、兩個div都設定為

display:

inline-block;這樣可能會出現兩個div頂端不對齊的情況,可以在右側div設定

vertical-align: top;

i am left

i am right

display:block就是將元素顯示為塊級元素.

block元素的特點是:

總是在新行上開始;

高度,行高以及頂和底邊距都可控制;

寬度預設是它的容器的100%,除非設定乙個寬度

, , , , 和 是塊元素的例子。

display:inline就是將元素顯示為行內元素.

inline元素的特點是:

和其他元素都在一行上;

高,行高及頂和底邊距不可改變;

寬度就是它的文字或的寬度,不可改變。

, , , ,

inline和block可以控制乙個元素的行寬高等特性,需要切換的情況如下:

讓乙個inline元素從新行開始;

讓塊元素和其他元素保持在一行上;

控制inline元素的寬度(對導航條特別有用);

控制inline元素的高度;

無須設定寬度即可為乙個塊元素設定與文字同寬的背景色。

display:inline-block將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。

inline-block的元素特點:

將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。(準確地說,應用此特性的元素呈現為內聯物件,周圍元素保持在同一行,但可以設定寬度和高度地塊元素的屬性)

並不是所有瀏覽器都支援此屬性,目前支援的瀏覽器有:opera、safari在ie中對內聯元素使用display:inline-block,ie是不識別的,但使用display:inline-block在ie下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表症。從上面的這個分析,也不難理解為什麼ie下,對塊元素設定display:inline-block屬性無法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout,而它本就是行布局,所以觸發後,塊元素依然還是行布局,而不會如opera中塊元素呈遞為內聯物件。

ie下塊元素如何實現display:inline-block的效果?

有兩種方法:

1、先使用display:inline-block屬性觸發塊元素,然後再定義display:inline,讓塊元素呈遞為內聯物件(兩個display要先後放在兩個css宣告中才有效果,這是ie的乙個經典bug,如果先定義了display:inline-block,然後再將display設回inline或block,layout不會消失)。**如下(...為省略的其他屬性內容):

div

div

2、直接讓塊元素設定為內聯物件呈遞(設定屬性display:inline),然後觸發塊元素的layout(如:zoom:1等)。**如下:

div

以下用個例子來說明三者的區別和用

">

">

div display:block

div display:inline

div display:inline-block

span display:inline

span display:block

a display:block

vertical-align:middle

兩個div橫向排列,頂端對齊的方式。

1 左右兩個div都設定為float left,如果右邊div沒有設定寬度,右邊div的寬度會根據div裡的內容自動調整。i am left i am right 2 只有左側div設定為float left,右側div設定overflow auto 右側div將會佔據整個右側剩餘寬度。i am l...

如何定義讓兩個div橫向排列

方法一 一般情況,預設的div是寫乙個換一行,那麼如何定義兩個div橫向排列而不換行呢?div預設的display屬性是block。所以每乙個div都是新的一行,現在把display換成inline就不會換新行了。aaabbb 方法二 這裡使用float right屬性。float做為css中的乙個...

讓兩個Div併排顯示的方法

讓兩個div併排顯示 示例 style width 300px height auto float left display inline aaaadiv style width 300px height auto float left display inline bbbbdiv 示例 left,...