浮點數：使用DIV時留下的問題？

Question

我有問題對齊的2 Div並排像2列在表中？有時它們會正確對齊，但有時右側Div出現在左側Div的下方，如果我刷新頁面，div會返回到原始位置。

如何配置它們以便divs總是並排顯示？

感謝

Answer 1

閱讀有關box model

通常你會因爲你的DIV改變寬度內填充的問題。如果一個div太寬而不能適應這個空間，它會坐在其他的下面。

例如，如果您有兩個寬度設置爲200px的div。

如果在其中一箇中設置填充爲5px，則實際寬度將爲210px（取決於瀏覽器）。

但這可能是多種原因。

Answer 2

這將是更好地接受這種行爲，因爲你無法控制屏幕，您的訪問者會using-本的尺寸允許你的佈局，以適度降低了設備如移動電話等

Answer 3

的問題在於寬度，當2個div與浮動左邊會縮小父母，然後通過CSS spec最右邊放置波紋管。

Answer 4

，我建議你在alistapart.com讀這兩個偉大的文章

CSS Swag: Multi-Column Lists

Faux Absolute Positioning

他們是真正的幫助，瞭解 '浮動' 屬性。

Answer 5

如果div太寬而不能適合一行，他們不會。因此，如果您使用像素值並且屏幕不夠寬，則不起作用。但是如果你使用相對寬度，比如47％，那麼你可以確定它們將始終是合適的大小以適合彼此相鄰，因爲它們會在窗口縮小時縮小。現在他們可能看起來有點奇怪，如果他們都是20像素寬，但這將確保他們總是彼此相鄰。 ：D

Answer 6

製作浮動div時重要的是設置「float」和「width」屬性。

<div style="float:left;width:100px">Left Div</div> 
<div style="float:left;width:100px">Middle Div</div> 
<div style="float:left;width:100px">Right Div</div> 
<div style="clear:both;">Bottom Div</div> 

會產生：

============================================== 
| Left Div | Middle Div | Right Div | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
============================================== 
|     Bottom Div     | 
============================================== 

如果調整您的瀏覽器到一個較小的窗口，div一定包裹。這是默認行爲。