如何定位低於另一個DIV DIV

我有兩個div的：如何定位低於另一個DIV DIV

<div><label for="1">Some really loooong text... Which breaks the second div. Which then appears shifted to the right.</label><input type="text" id="1" name"1"></div> 
<div><label for="2">Shifted.</label><input type="text" id="2" name"2">

我用下面的CSS浮動左輸入文本字段的標籤：

label{ 
    width:200px; 
    float:left; 
}

的第二個div轉移到而不是出現在第一個下面。它應該與第一個左側對齊。

這裏是例子：http://jsfiddle.net/qh37Y/

現在，如果我插入明確：兩者; div工作，但這是最佳做法？

.clearer { 
    clear:both; 
} 
<div class="clearer"><label for="2">Shifted.</label><input type="text" id="2" name"2">

在這裏看到：http://jsfiddle.net/ywUx6/

來源

2012-06-12 jrn

它看起來好像這實際上是div的高度問題。

由於內容是浮動的，它不會影響div的高度。因此，第二個div中的內容（不是div本身）包裹了第一個div中的浮動標籤。

clear: both是可以接受的，但是如果（例如），你想用這些div作爲兩列布局的一列，它會破壞佈局。

我建議用div { overflow: hidden; }代替。這爲div提供了一個新的box-context，它禁止重疊邊框，從而使浮動內容的高度對div的高度有貢獻。

編輯：Fixed fiddle

來源

2012-06-12 19:45:15

只要你知道，這是正確的答案。 – dbkaplun

哦，'overflow：auto'也是可以接受的。 –

我不得不添加'width：100％'來讓它在我的情況下工作（在FF和Chrome中） – koppor

是，clear: both通常你最終使用的。請注意，您還可以使用clear: left等

來源

2012-06-12 19:41:03

首先，你不能使用與數字開始的標識符 - 只是說;）

如果我明白你的probledm，解決方案是增加clear: both到您的DIV ：

div { clear: both }

放置標籤定義下的代碼。

來源

2012-06-12 19:42:18

感謝您與ID的提示:) – jrn

沒問題;）我很高興我的幫助。 –

明確：兩個div完全可以接受使用。

來源

2012-06-12 19:42:31 user1452058

如何定位低於另一個DIV DIV

回答

相關問題