Question

我在其中有一个容器div和3 div，如下所示。

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

我不了解内部每个div的内容，但它们的高度和宽度各不相同。

容器的高度由内部最高的div决定。

我希望以div这样的方式展示它们首先填充高度（从左到右）然后移动到下一列，如下所示。

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

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

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

问题：是否可以优先使用CSS以及如何执行此操作？

编辑：

我需要澄清一些事情
容器最多可以有2列或3列（从不1列，绝不超过3列）。
容器的宽度不固定，但所有内部div的宽度相同。
容器的高度由最高的内部div决定。例如，如果最高的div是300px容器的高度也将是300px。
另外两个较短的div应决定它们是否适合一列或应显示在两个单独的列中。基于示例（上一个项目）。
另外两个最小的div应该决定是一列还是两列。
不应包裹任何内部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列布局。

Answer 1

对列的仅限CSS 解决方案可以是在容器上使用column-count和max-height（包裹div）。

请参阅此答案：CSS float under and left
和DEMO仅限CSS的方法

至少在某种程度上，它有点像你想要的那样。但它可能会在分栏符时打破divs。所以我想，你可能会更好用javascript中的东西。

更新

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

另一个注意事项：为避免在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/

布局除了行然后是列

2 个答案:

更新