並排添加混淆

我總是覺得這個簡單的HTML錯誤。目前我正在試圖通過邊的div在頁面中間加方這個測試頁面我做了：並排添加混淆

http://www.comehike.com/hiking_dev.php

我添加的代碼是這樣的：

<div style="width: 460px; float: left; "> 
<strong>Test hello</strong> 
</div> 
<div style="width: 300px; float: right; "> 
<strong>Test hello 2</strong> 
</div>

我加<strong>標籤，以便您可以更好地在頁面上發現它。

但是您是否看到有文字出現在那裏，如下所示：「在考慮任何受傷風險時」 - 但該文本位於以下<p>標記中。它爲什麼出現在那裏？

是不是更好的做法來包裝我想要在另一個div內對齊的2個div？

來源

2011-07-08 Genadinik

你的兩個浮動的div後，添加其他空div ...

<div style="clear:both;"></div>

這將導致兩個浮動的div來推動它們下面所有的後續內容。就像現在一樣，第一個div後面有200個像素的空白區域，允許其他內容簡單地環繞它。

增加浮動div的寬度可能不適合您的佈局，因此clear:both;是最典型的情況。

來源

2011-07-08 18:48:52 Sparky

將父窗口中的那些兩個div設置爲隱藏。

<div style="overflow:hidden;"> 
    <div style="width: 460px; float: left; "> 
    <strong>Test hello</strong> 
    </div> 
    <div style="width: 300px; float: right; "> 
    <strong>Test hello 2</strong> 
    </div> 
</div>

的替代（如其他人指出的）是使用第三個元素：

<div style="clear:both;"></div>

這是值得商榷的作爲是爲了更好的。通常，兩者都很好。以下是有關該主題的帖子： Floated Child Elements: overflow:hidden or clear:both?

來源

2011-07-08 18:47:31 tybro0103

不需要，只是一個寬度的問題。 – Phil

我不同意。設置爲並排浮動的Div應始終位於容器中。無論是那個還是下一個要素都應該清楚：兩者;組。如果沒有這種種類的恐怖將會發生。 – tybro0103

這是有道理的，我通常會這樣做，我只是說作爲一個修復。 – Phil

因爲您的整個頁面寬度爲960px。你組合的div寬度是760px（400 + 300）。如果你添加200px到第二個div，你應該沒問題。

編輯：由於填充，您可以增加任何divs並罰款。

來源

2011-07-08 18:48:41 Phil

無論是包含佈局還是內容本身，這些東西的寬度總是會發生變化。更不用說，根據文檔類型的不同，不同的瀏覽器會以不同的方式計算總寬度。以這種方式修復它將需要很多未來的重新組合。使用周圍的溢出：隱藏;或第三個因素清楚：兩者; – tybro0103

是的，'清楚：兩個'都是答案。 – Phil

您或者需要在其他人建議的clear:both;的兩個div下面添加div，或者您可以將clear:both;添加到以下<p>元素。

來源

2011-07-08 18:50:56 jncraton

並排添加混淆

回答

相關問題