7

私は2つの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;
}​

2 番目の div は、最初の div の下に表示されるのではなく、左に移動します。最初のものと同じように左に揃える必要があります。

例を次に示します: http://jsfiddle.net/qh37Y/

ここでclear:both;を挿入すると、div は機能しますが、これはベストプラクティスですか?

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

ここを参照してください: http://jsfiddle.net/ywUx6/

4

5 に答える 5

14

これは実際にはdivの高さに問題があるようです。

コンテンツはフローティングなので、div の高さには影響しません。したがって、2 番目の div のコンテンツ (div 自体ではない) は、最初の div のフローティング ラベルをラップします。

clear: both許容されますが、たとえば、これらの div を 2 列レイアウトの 1 列として使用したい場合、レイアウトが壊れます。

代わりに提案しdiv { overflow: hidden; }ます。これにより、div に新しいボックス コンテキストが提供されます。これにより、境界線の重なりが許可されなくなり、フローティング コンテンツの高さが div の高さに寄与します。

編集：フィドルを修正

于 2012-06-12T19:45:15.880 に答える
7

clear:both div の使用は完全に受け入れられます。

于 2012-06-12T19:42:31.573 に答える
5

はい、clear: both通常は最終的に使用するものです。clear: leftetcも使用できることに注意してください

于 2012-06-12T19:41:03.083 に答える
4

まず第一に、数字で始まる識別子を使用することはできません-ただ言うだけです;）

あなたの問題を理解した場合、解決策はclear: bothあなたのdivに追加することです:

div { clear: both }

ラベル定義の下にコードを配置します。

于 2012-06-12T19:42:18.933 に答える