CSS讓2個DIV在同一行顯示的解決方案

標籤：div同行顯示

在CSS中，div屬於區塊層級元素，每個區塊層級元素預設佔一行高度，一行內添加一個區塊層級元素後無法一般無法添加其他元素（float浮動後除外）。兩個區塊層級元素連續編輯時，會在頁面自動換行顯示。所以預設情況下，2個div是無法顯示在同一行的，必須通過樣式屬性去修改。

 

解決方方法1：display:inline，將其變成行級元素，這樣2個div就會排在同一行。

<div style="width:400px;height:300px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"><div style="background-color:#6495ED;width:100px;height:100px;display:inline;"></div><div style="background-color:#C0FF3E;width:100px;height:100px;display:inline;"></div><div style="background-color:#8A2BE2;width:100px;height:100px;display:inline;"></div></div>

 

解決方案2：使用float

<div style="width:700px;height:500px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"><div style="background-color:#6495ED;width:100px;height:100px;float:left;"></div><div style="background-color:#C0FF3E;width:100px;height:100px;float:left;"></div><div style="background-color:#C0FF3E;width:100px;height:100px;float:right;"></div><!--必須清除浮動,才能換行--><div style="background-color:#8A2BE2;width:100px;height:100px;clear:both;"></div></div>

 

使用inline，2個div之間預設是有縫隙的，不會剛好貼在一起；使用float，會影響後續的div，必須通過clear清除。

CSS讓2個DIV在同一行顯示的解決方案