CSS：在多行上浮动多个高度不同的元素？ [英] CSS: Floating multiple elements with different heights on multiple rows?

问题描述

我试图将 div s组织成两列，但不会将它们强制为行。我还试图保持 div sa的垂直间距不变。

你可以看到下面的演示，如果每列中的div之间没有大量的垂直空格，这将是正确的。

html

 < div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
  

我认为我可以将它们浮动到左侧，并显示一个静态宽度，但显然，

任何想法？

解决方案

感谢 J.Albert Bowden 。 net / jalbertbowdenii / 7Chkz />小提琴

HTML

 < div id =box> 
< div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
< div class =module>< / div> 
< / div> 
  

CSS

  #box {
 -moz-column-count：3; 
 -moz-column-gap：3％; 
 -moz-column-width：30％; 
 -webkit-column-count：3; 
 -webkit-column-gap：3％; 
 -webkit-column-width：30％; 
列数：3; 
栏位差距：3％; 
列宽：30％; 
} 
 .module {
 margin-bottom：20px; 
} 
  

I'm trying to organize divs into two columns, but not force them into rows. I'm also trying to keep the vertical spacing between the divs a constant.

You can see the following demo, which would be correct if there wasn't huge amounts of vertical whitespace between the divs in each column.

html

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

I thought that I could just float them to the left with a static width, but apparently that didn't work.

Any ideas?

解决方案

Thanks to J.Albert Bowden for the fiddle

HTML

<div id="box">
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</div>

CSS

#box{
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.module{
    margin-bottom: 20px;
}

这篇关于CSS：在多行上浮动多个高度不同的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！