Question

我有相同宽度但不同高度的div，它们应该显示在列中，浮动到它们上方的下一个div。

Is there any way to handle that without placing them via Javascript?

我的一个想法是为列添加div并将div放入其中，但是否有另一种可能性而不添加更多标记？

提前致谢！

Answer 1

另一种可能的解决方案是使用CSS列。将columns属性应用于容器

body {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
}

然后在display: inline-block;上使用div。

示例：http://jsfiddle.net/tdwZe/

另见https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

注意：早于IE10（http://caniuse.com/#feat=multicolumn）的IE中不支持CSS列。

Answer 2

您可以，但您需要将这些框放在父框

中

演示 http://jsbin.com/ozazat/3/edit

例如3列，每列包含任意数量的框：

div div {
  background-color:red;
  margin:10px;
}
.col1, .col2, .col3 {
  width:100px;
  float:left;
  border:solid;
}

HTML

<div class="col1">
    <div>text</div>
    <div>text</div>
    <div>text</div>
  </div>  
  <div class="col2">

        <div>text<br>text</div>
    <div>text</div>

  </div>  
  <div class="col3">
        <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>

  </div>

Answer 3

是。您可以使用绝对位置。假设你知道你的div的高度。此解决方案不适用于动态内容。

您需要为每个div分配一个类，然后提供相关的CSS来正确定位它。

div1 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 0;
}

div2 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}

等等...

如果你有动态内容，最好使用JavaScript，尤其是jQuery Masonry Plugin。

另一种方法是，就像你提到的那样，将你的div叠加在列中。

有关详细信息，请参阅this question。

Answer 4

对每个div使用float：left然后对每个奇数div使用clear：left。这将跨浏览器工作，除了使用奇数子。你必须添加额外的标记，并为此做出神圣的评价。不幸的是，没有办法绕过那个

垂直堆叠不同列css中的div

4 个答案: