布局按行，然后列 [英] Layout divs in rows then columns
问题描述
我有一个容器 div 和3 div ，如下所示。
< div>
< div> 1< / div>
< div> 2< / div>
< div> 3< / div>
< / div>
我不知道每个 div的内容里面，但它们具有可变的高度和宽度。
容器的高度由最高 div
我想显示这些 div 这样一种方式，他们首先填充高度（从左到右），然后移动到下一列如下。
+ ------------------ +
| + ------- ++ ------- + |
|| || ||
|| || ||
| + ------- + | ||
| + ------- + | ||
|| || ||
|| || ||
| + ------- + | ||
| + ------- + |
+ ------------------ +
显然，如果这些 div 都很大，并且不能在一列中，那么布局将是3列，如下所示
+ --------------------------- +
| + ------- ++ ------- ++ ------- + |
|| || || ||
|| || || ||
|| || || ||
|| || || ||
|| | + ------- + | ||
|| | | ||
| + ------- + | ||
| + ------- + |
+ --------------------------- +
问题：最好只使用CSS，以及如何做到这一点？
EDIT ：
- 容器最多可以有2或3列（从不会有1列，也不能超过3列）。
- 宽度容器不是固定的，但是所有内部div是相同的。
- 容器的高度由最高的内部div决定。例如，如果最高的div为300px，容器的高度也将为300像素。
- 其他两个较短的div应该决定它们是否适合一列，或者应该显示在两个单独的列中。
- 其他两个最小的div应该决定为一列或两列。
- 无内部div ：：div高度：第一个300px，第二个100px，第三个150px
结果：这是一个2列布局（同一列中的第二和第三）。
示例：div Heights：1st 100px ，2nd 300px，3rd 150px
结果：这是一个3列布局。
示例：div Heights：1st 100px，2nd 200px，3rd 300px
结果：这是一个2列布局（同一列中的第1和第2个）。
示例：div Heights：1st 100px，2nd 210px，3rd 300px
结果：这是一个3列布局。
CSS 列的解决方案可以使用 column-count 和
它有点你想要的，至少在某种程度上。但它可能会打破 divs 在列中断。
更新：
在您的附加条件，我只添加这个到我的答案，关于CSS-only方法： column-break-inside：avoid 。它仍然不是完美的 - 但有点接近你想要的。 您必须为列指定 width ，然后可以将div设置为 width：100％列数是自动的，好的，但我不知道你是否可以动态调整容器的宽度到列数。
另一个注意事项：，以避免在firefox中分割div，您还需要使用 display：inline-block; 。
因此，您可以在这里查看它的效果如何： DEMO
至少要玩一些东西，或许会用另一个时间; - ）
I have a container div and 3 div inside it as following.
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
I don't know about content of each div inside, but they have variable height and width.
Height of container is decided by tallest div inside.
I want to show these div such a way that they fill height first (left to right) and then move to next column like below.
+------------------+
|+-------++-------+|
|| || ||
|| || ||
|+-------+| ||
|+-------+| ||
|| || ||
|| || ||
|+-------+| ||
| +-------+|
+------------------+
Obviously if these divs are all big and can't fit in one column, the layout will be 3 columns like below
+---------------------------+
|+-------++-------++-------+|
|| || || ||
|| || || ||
|| || || ||
|| || || ||
|| |+-------+| ||
|| | | ||
|+-------+ | ||
| +-------+|
+---------------------------+
Question: Is it possible to do this preferably using CSS only and how?
EDIT:
- There are few things that I need to clarify
- The container can have 2 or 3 columns at most (never 1 column and never more than 3).
- Width of the container is not fixed but with of all internal div are same.
- Height of container is decided by tallest internal div. for example if the tallest div is 300px height of container will be also be 300px.
- the other two shorter div should decide if they can fit in one column or should show in two separate columns. based on example (previous item).
- The other two smallest div should decide to be in one column or two columns.
- none of internal div should be wrapped.
Example: div Heights: 1st 300px, 2nd 100px, 3rd 150px
Result: This is a 2 column layout (2nd and 3rd in same column).
Example: div Heights: 1st 100px, 2nd 300px, 3rd 150px
Result: This is a 3 column layout.
Example: div Heights: 1st 100px, 2nd 200px, 3rd 300px
Result: This is a 2 column layout (1st and 2nd in same column).
Example: div Heights: 1st 100px, 2nd 210px, 3rd 300px
Result: This is a 3 column layout.
An CSS only solution to columns could be to use column-count and a max-height on the container (the wrapping div).
see this answer: CSS float under and left
and a DEMO of a CSS-only approach
It kinda does what you want, at least to some extend. But it might break the divs at column breaks. So I think, you would probably be better of with something in javascript.
Update:
After your additional conditions, I would add only this to my answer, concerning the CSS-only approach: column-break-inside:avoid. It still ain't perfect - but a bit closer to what you want. You have to assign the width to columns, the divs can then be set to width:100%, the number of columns is automatic, alright, but I am not sure if you can dynamicaly adjust the container's width to the number of columns.
another note: to avoid splitting the divs in firefox, you need to use display:inline-block; in addition.
So, here you can see how it performs with your examples: DEMO
At least something to play with and maybe use another time ;-)
这篇关于布局按行，然后列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
