在行和列中布局 div

Question

我有一个容器 div 和 3 div 在里面如下。

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

我不知道里面每个div的内容，但它们的高度和宽度是可变的。

容器的高度由里面最高的div决定。

我想展示这些div，这样它们首先填充高度（从左到右），然后像下面那样移动到下一列。

+------------------+
|+-------++-------+|
||       ||       ||
||       ||       ||
|+-------+|       ||
|+-------+|       ||
||       ||       ||
||       ||       ||
|+-------+|       ||
|         +-------+|
+------------------+

显然，如果这些divs 都很大并且不能放在一列中，那么布局将是如下所示的 3 列

+---------------------------+
|+-------++-------++-------+|
||       ||       ||       ||
||       ||       ||       ||
||       ||       ||       ||
||       ||       ||       ||
||       |+-------+|       ||
||       |         |       ||
|+-------+         |       ||
|                  +-------+|
+---------------------------+

问题：是否可以最好只使用 CSS 以及如何做到这一点？

编辑：

• 我需要澄清几件事
• 容器最多可以有 2 或 3 列（永远不能有 1 列，也不能超过 3 列）。
• 容器的宽度不固定，但所有内部 div 的宽度相同。
• 容器的高度由最高的内部 div 决定。例如，如果最高的 div 是 300px，容器的高度也将是 300px。
• 另外两个较短的 div 应该决定它们是否可以放在一列中，或者应该显示在两个单独的列中。基于示例（上一项）。
• 另外两个最小的 div 应该决定是在一列还是两列。
• 不应包装任何内部 div。

示例：div 高度：第一个 300 像素、第二个 100 像素、第三个 150 像素
结果：这是一个 2 列布局（同一列中的第 2 列和第 3 列）。

示例：div 高度：第一个 100px、第二个 300px、第三个 150px
结果：这是一个 3 列布局。

示例：div 高度：第一个 100px、第二个 200px、第三个 300px
结果：这是 2 列布局（同一列中的第 1 列和第 2 列）。

示例：div 高度：第一个 100 像素、第二个 210 像素、第三个 300 像素
结果：这是一个 3 列布局。

Answer 1

CSS only 对列的解决方案可能是在容器上使用column-count 和max-height（包装div）。

• 看到这个答案：CSS float under and left

• 和DEMO 的纯 CSS 方法

它有点像你想要的，至少在某种程度上。但它可能会在分栏符处破坏divs。所以我认为，你可能会更好地使用 javascript。

更新：

在您的附加条件之后，关于纯 CSS 方法，我只想在我的答案中添加这个：column-break-inside:avoid。它仍然不完美 - 但更接近你想要的。 您必须将width 分配给列，然后可以将 div 设置为width:100%，列数是自动的，好吧，但我不确定您是否可以将容器的宽度动态调整为数字列数。

另外注意：为避免在firefox中拆分div，需要另外使用display:inline-block;。

因此，您可以在此处查看示例的执行情况：DEMO

至少有一些东西可以玩，也许可以用其他时间;-)

Answer 2

关键是使前两个 div display:inline-block 和最后一个 float:right。像这样：

.container{
    border: 1px solid grey;
    width: 200px; height: auto;
    margin: 20px; padding: 10px;
}
.container .one{
    border: 1px solid green;
    display: inline-block;
}
.container .two{
    border: 1px solid blue;
    display: inline-block;
}
.container .three{
    border: 1px solid red;
    float: right;
}
.clear{
    clear: both;
}

HTML：

<div class="container">
    <div class="three" style="width: 60px; height: 100px;"></div>
    <div class="one" style="width: 60px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
    <div class="clear"></div>
</div>
<div class="container">
    <div class="three" style="width: 70px; height: 100px;"></div>
    <div class="one" style="width: 70px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
</div>

这里是工作结果的链接：http://jsfiddle.net/8xmrL/