在界面設計的時候，經常需要將兩個div在同一行顯示。
但是每次都會忘記怎么做，特此隨筆，備忘。
如以下要將“第一個div”和“第二個div”顯示在同一行：
<div id="id1"> /*外層div*/
<div id="id2" style="width:100px;height:20px;">第一個div</div>
<div id="id3" style="width:100px;height:20px;">第二個div</div>
</div>
只需要對id2和id3增加css樣式即可，如下所示：
<div id="id1"> /*外層div*/
<div id="id2" style="width:100px;height:20px;float:left;">第一個div</div>
<div id="id3" style="width:100px;height:20px;float:left;">第二個div</div>
</div>
這樣就可以了。很簡單吧。
2016.09.20 修改補充
在此隨筆發出的幾個小時之后，有大神提出了質疑：沒有清除浮動，並給我了一個差評。
哈哈哈哈。感謝這位大神的指正。
那下面就清除一下浮動吧。
以下面代碼為例進行說明：
（1）
<div id="id1" style="width:300px;border:1px solid black">
<div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一個div</div>
<div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二個div</div>
</div>
代碼（1）的截圖為
，可以看到，id2和id3並沒有在id1中。這就是沒有清除浮動的效果。
清除浮動的方法：
1、對父級設置合適的高度：對父級設置合適的高度進行清除浮動，父級內內容的高度為20px+2px=22px，在id1中增加樣式height=“22px”即可。
效果圖：
。
缺點：對父級設置合適的高度來清除浮動的這種方法必須要知道父級內容的高度。比較不方便。
2、clear:both清除浮動：在父級元素結束前，增加以下紅色代碼，清除浮動。
<div id="id1" style="width:300px;border:1px solid black">
<div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一個div</div>
<div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二個div</div>
<div id="id4" style="clear:both"></div> /*增加此句，清除浮動*/
</div>
效果圖：。
3、父級div定義overflow:hidden清除浮動：
id1增加overflow:hidden樣式，即可清除父級元素內使用float:left/float:right產生的浮動。
效果圖：。
以上是清除浮動的三種方法，望大神指教。
參考：http://www.divcss5.com/jiqiao/j406.shtml