9

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

小提琴：http: //jsfiddle.net/kaljak/DAYSk/

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

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

提前致谢！

4

4 回答 4

5

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

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

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

示例：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 列。

于 2013-07-13T17:02:11.997 回答
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>
于 2013-07-13T16:36:58.047 回答
1

是的。您可以使用绝对位置。假设您知道 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 */
}

ETC...

如果您确实有动态内容，最好使用 JavaScript，尤其是jQuery Masonry 插件。

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

有关更多详细信息，请参阅此问题。

于 2013-07-13T16:30:34.877 回答
0

对每个 div 使用 float:left，然后对每个奇数 div 使用 clear:left。除了使用奇数子之外，这将跨浏览器工作。您将不得不添加额外的标记和神圣的，我会为此。不幸的是，没有办法解决这个问题

于 2013-07-13T18:25:26.463 回答