次のように、コンテナdivとその中に3つdivがあります。
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
それぞれの中身はわかりませんがdiv、高さと幅が可変です。
コンテナの高さは、コンテナ内の高さによって決まりdivます。
div最初に高さを埋めて（左から右へ）、次のように次の列に移動する方法を示したいと思います。
+------------------+
|+-------++-------+|
|| || ||
|| || ||
|+-------+| ||
|+-------+| ||
|| || ||
|| || ||
|+-------+| ||
| +-------+|
+------------------+
明らかに、これらdivの s がすべて大きくて 1 列に収まらない場合、レイアウトは以下のように 3 列になります。
+---------------------------+
|+-------++-------++-------+|
|| || || ||
|| || || ||
|| || || ||
|| || || ||
|| |+-------+| ||
|| | | ||
|+-------+ | ||
| +-------+|
+---------------------------+
質問:できれば CSS のみを使用してこれを行うことは可能ですか? またその方法は?
編集：
- 明確にする必要があることがいくつかあります
- コンテナーには、最大で 2 つまたは 3 つの列を含めることができます (1 つの列も 3 つを超えることもありません)。
- コンテナの幅は固定されていませんが、すべての内部 div は同じです。
- コンテナーの高さは、最も高い内部 div によって決まります。たとえば、最も高い div が 300px の場合、コンテナーの高さも 300px になります。
- 他の 2 つの短い div は、1 つの列に収まるか、2 つの別々の列に表示するかを決定する必要があります。例に基づく（前の項目）。
- 他の 2 つの最小の div は、1 列または 2 列に配置する必要があります。
- 内部 div をラップする必要はありません。
例: div 高さ: 1 番目 300px、2 番目 100px、3 番目 150px
結果: これは 2 列のレイアウトです (2 番目と 3 番目は同じ列にあります)。
例: div 高さ: 1 番目 100px、2 番目 300px、3 番目 150px
結果: これは 3 列のレイアウトです。
例: div 高さ: 1 番目 100px、2 番目 200px、3 番目 300px
結果: これは 2 列のレイアウトです (1 番目と 2 番目は同じ列にあります)。
例: div 高さ: 1 番目 100px、2 番目 210px、3 番目 300px
結果: これは 3 列のレイアウトです。