布局按行,然后列 [英] 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 div
s 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屋!