动态列/行

Question

想知道 - 有没有人知道任何解释CSS技术的好文章，允许类的多个实例相对于它上面的项目向下流动。没有那么好解释。

Veerle'Pierter's在这个页面上做到了：http://veerle.duoh.com/belgiangraphicdesign虽然我不确定我想使用像她这样的技术，需要通过她的EE安装输入每个元素的高度。

我画了一些关于我想要实现的东西;

关键是我需要一种强大的技术来做到这一点。标记可以简单的东西;

<div class="box">
  Number 1
</div>
<div class="box">
  Number 2
</div>
<div class="box">
  Number 3
</div>
<div class="box">
  Number 4
</div>
<div class="box">
  Number 5
</div>
...

会喜欢任何正确方向的指针。

Answer 1

正如其他人所指出的那样，只使用CSS就可以将这些框分组成列。不幸的是，如果您的内容是动态的，并且您不知道所有框的高度（您的列可能会达到完全不同的长度），这将不会很好。如果你想计算盒子的高度以便很好地安排它们，你将不得不使用Javascript。使用Javascript肯定没有错 - 这是这项工作的正确工具！

至于实现，逻辑将是这样的：首先添加前4个框，每个列顶部一个。然后使用Javascript的clientHeight属性以及要添加的每个新框跟踪每列的总高度;只需使用appendChild（）将其附加到最短列的末尾。

如果您决定使用jQuery，我可以推荐一个名为jQuery Masonry的插件。

Answer 2

她没有为这些盒子设置高度。

Jquery动态定位每个框，据我所知，这是使用您在帖子中描述的标记实现该效果的唯一方法。

如果您不想使用javascript解决方案，唯一的方法是使用包装器列，但这会显着改变您的标记。

<div class="container">
     <div class="box">number 1</div>
     <div class="box">number 2</div>
     <div class="box">number 3</div>
</div>
<div class="container">
     <div class="box">number 4</div>
     <div class="box">number 5</div>
     <div class="box">number 6</div>
</div>
<div class="container">
     <div class="box">number 7</div>
     <div class="box">number 8</div>
     <div class="box">number 9</div>
</div>

Answer 3

她实现了绝对定位盒子。

但是你可以用非常简单的css来实现它，假设你可以控制项目出现的顺序 你必须将它们分组在列中（而不是像往常一样在行中），但它就像一个魅力。

像这样使用HTML：

<span class="column">
  <div class="box">number 1<br />with two lines</div>
  <div class="box">number 4</div>
  <div class="box">number 7<br />with two  lines</div>
</span>
<span class="column">
  <div class="box">number 2</div>
  <div class="box">number 5<br />with two  lines<br />or even three<br />or four!</div>
  <div class="box">number 8</div>
</span>
<span class="column">
  <div class="box">number 3</div>
  <div class="box">number 6</div>
  <div class="box">number 9</div>
</span>

这样的CSS：

.column {
    clear: left;
    width: 25%;
    display: inline-block;
    vertical-align: top;
}
.box {
    border: solid 1px blue;
}

在JSFiddle.net上测试。
使用span作为列，因为IE7不接受display: inline-block;作为自然块元素的元素。 （MEH）。