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

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

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橫向排列，頂端對齊的方式。

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

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

讓兩個Div併排顯示的方法

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

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

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

讓兩個Div併排顯示的方法

相關推薦