0

日付順に並べ替えた 2 列のリストを作成しています。これを使用して、別々の日の背景色 (白/赤/白/赤) を交互に変更したい:

.evenDayBlock {
    background:#red
}

レイアウトを表示するフィドルを作成しました http://jsfiddle.net/Ceh37/

問題は、各リスト項目をフロートしたため、リストが作成されたときにクラスの div がevenDayBlock下に伸びていないことです。各リスト項目のフロートを削除すると、div が正しく展開されます。フロートを使用するだけでなく、親 div が子のサイズを尊重するようにするにはどうすればよいですか?

アップデート

OK、それは邪悪なものを生み出すので、リスト項目で div を置き換えることはできません。ここでフィドルを更新しました：

http://jsfiddle.net/Ceh37/2/

すべてをdivに切り替えました。これにより、evenDayBlock が最初のoddDayBlock を超えてプッシュされるようになりましたが、含まれるすべての子 div をカバーするように拡張されていないため、少し状況が改善されました。

4

3 に答える 3

3

フィドルのセマンティクスを修正した後 (質問へのコメントを参照)、overflow: hiddenすべてのフローティング要素の親コンテナーで使用してみてください (たとえば、 s がフローティングされている場合は、直接の親<li>でオーバーフロー トリックを使用します)。<ul>

または、 clearfixメソッドを使用することもできます。

于 2013-02-27T23:11:01.647 に答える
1

ブロックにフローティング要素があり、ブロックの背景がコンテンツのサイズまで拡張されていない場合は、ブロックのスタイルに「overflow:auto」を追加することでこれを解決できます。

.evenDayBlock {
    background:#red;
    overflow:auto;
}

ちなみに、"#red"私には奇妙に思えますが、"red"またはを使用してください"#F00"

これがお役に立てば幸いです。

于 2013-02-27T23:15:15.970 に答える
-1

あなたがそれを正しく行っているかどうかはわかりませんが、フロートを使用してフィニッシュラインを設定したい場合は、次のことを行う必要があります。

<div style="clear:both;">
于 2013-02-27T23:12:16.083 に答える