CSS浮动下和左 [英] CSS float under and left

问题描述

我有很多可变高度的div。我需要这些div在彼此下排序，但当他们到达窗口的结尾 - >创建新的列。

现在divs溢出，但我需要创建新列。

BTW：

我有以下解决方案：

  -webkit-column-gap：16px; 
 -webkit-column-width：230px; 
  

但我需要支持其他浏览器。

>

一个选项将使用 column-count 和 max-height 。

请参阅 DEMO

但我不确定浏览器sopport。

编辑：在这里我粘贴CSS：

  .container {
 column-count：3; 
 -webkit-column-count：3; 
 -moz-column-count：3; 
 -ms-column-count：3; 
 -o-column-count：3; 
 
 vertical-align：text-top; 
 
 max-height：100px; 
} 
  

I have many divs with variable height. I need these divs sort under each other but when they will reach end of window –> create new "column".

Now divs are overflowing, but I need to create new "column".

BTW:

I have solution using:

-webkit-column-gap: 16px;
-webkit-column-width: 230px;

But I need to support other browsers.

Thank you for your help!

解决方案

To do it with CSS only,

an option would be using column-count and a max-height on the container.

see DEMO

but I am not sure about browser sopport.

It kinda does what you want, at least to some extend, but you would probably be better of with something in javascript.

EDIT: here I paste the CSS:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}

这篇关于CSS浮动下和左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！