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,...