3

我有一个容器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 高度：第 1 个 300px，第 2 个 100px，第 3 个 150px
结果：这是一个 2 列布局（同一列中的第 2 和第 3）。

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

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

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

4

2 回答 2

1

列的唯一 CSS解决方案可能是在容器上使用column-count和 a （包装）。max-heightdiv

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

更新：

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

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

所以，在这里你可以看到它在你的例子中的表现：DEMO

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

于 2013-05-15T08:41:02.670 回答
0

关键是制作前两个 divdisplay:inline-block和最后一个div 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/

于 2013-05-15T09:32:11.280 回答