Javascript 按行然后按列布局div

我在里面有一个容器

div

和3个

div

，如下所示

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

显然，如果这些

div

s都很大，不能放在一列中，那么布局将是3列，如下所示

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

问题：是否可以只使用CSS来实现这一点，以及如何实现

编辑：

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

示例：分区高度：第一个300px，第二个100px，第三个150px
结果：这是一个2列布局（同一列中的第2列和第3列）

示例：分区高度：第一个100px，第二个300px，第三个150px
结果：这是一个3列布局

示例：分区高度：第一个100px，第二个200px，第三个300px
结果：这是一个两列布局（第一列和第二列在同一列中）

示例：分区高度：第一个100像素，第二个210像素，第三个300像素

---

结果：这是一个3列布局。

一个仅用于CSS的列解决方案可以是在容器上使用

列计数和
最大高度（包装
div
）


看看这个答案：

而且是一种只使用CSS的方法


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

更新：
在您的附加条件之后，我只想在我的回答中添加以下内容，关于仅CSS的方法：
内部分栏：避免
。它仍然不是完美的-但有点接近你想要的。您必须将
宽度
分配给列，然后可以将div设置为
宽度：100%
，列数是自动的，好吧，但我不确定您是否可以根据列数动态调整容器的宽度

另一个注意事项：为了避免在firefox中拆分div，您需要使用
display:inline block另外

因此，在这里，您可以通过示例了解它的性能：

至少有东西可以玩，也许可以另找时间；-）
 关键是使前两个div
显示：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:



这里是工作结果的链接：
我不确定这是否完全适合您的需要，但您可能会发现它很有用：请创建一个小提琴，我不明白您想要什么？我很困惑我最近读到了关于boxflex的东西。我还没有深入研究过它，但它似乎是一个很好的解决方案，适合您描述的布局情况。谢谢你的回答。我更新了我的问题，澄清了几个问题things@BobSort我想澄清的问题答案是否定的。如果没有javascript，这是不可能的。我稍微修正了上一个演示。此外，这里我只想用你们的例子添加一个稍微不同的版本，说明你们如何以一种非常优雅的方式使用这种方法来实现一个响应性设计（如果你们尝试调整宽度）：我不确定你们是否会发现这是有用的。但它为这种方法增加了价值^_^
.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;
}

<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>