html - フローティング div の問題

Question

動的コンテンツを含むフローティング div があります。最初の行では、4 つの div が必要です。同様に、2 番目、3 番目、4 番目など... 4 つの div が必要です。クラスを 1 つの div に割り当てると、残りの div が自動的に生成されます。私の問題は、最小高さを div に設定できることですが、コンテンツが動的に作成されるため、最大高さを設定できません。コンテンツが少ない場合、div は一列に並んでいません。このため、今後の div でも問題が発生します。これらの div を配置するにはどうすればよいですか?

Answer 1

最初の div に新しい行を追加しclear:both;ます。これにより、すべての div が一列に並んでいます。

div {float:left;border:1px solid #000;margin:20px;width:100px;}
.clear_both{clear:both;}
.one {height:100px;}
.two {height:50px;}
.three {height:200px;}
.four {height:150px;}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="two clear_both"></div>
<div class="three"></div>
<div class="four"></div>
<div class="one"></div>

Answer 2

できることの 1 つは、高さを固定し、overflowCSS プロパティ セットをhide使用してテキストを非表示にし、title 属性を使用してテキスト全体をツールチップに表示することです。