javascript - 如何根据上面的另一个 <tr> 元素对齐 <tr> 元素

Question

所以我有大约 20 个标签，它们都有绝对位置。它们是根据我从 XML 获得的响应动态生成的，并且它们目前彼此相邻对齐。

如何将它们对齐为每行 4 个，但第 5 个标签恰好在第 1 个标签下方，第 6 个标签在第 2 个标签下方，依此类推。每个标签都有不同的高度。 通常，前 4 个不需要任何对齐。

结构如下:

<table>
  <tbody>
     <tr>
     <tr>
     <tr>
     ........
     <tr>
     <tr>
  </tbody>
</table>

这是我的标签 CSS:

.innerContent tr {
      background: none repeat scroll 0 0 #F3F3F3;
      border-radius: 5px 5px 5px 5px;    
      float: left;
      height: auto;
      margin: 0 5px 25px;
      padding: 0;
      position: absolute;
      transition: all 1s ease 0s;
      z-index: 5;
}

我怀疑这可以用 CSS 实现，所以我在考虑 JQuery。我尝试的所有方法都只是让它们全部 4 乘 4 重叠。

Answer 1

正如我在上面的评论中提到的，我强烈建议反对为此使用 table。您似乎没有用表格数据填充它，所以您只是将它用作布局工具。对于您想做的事情，这是一个非常糟糕的工具。

既然您在上面提到了 Twitter Bootstrap，我建议您使用他们的 scaffolding grid system .举一个非常基本的例子，看看这个 jsFiddle关于我将如何处理这个问题。

为完成起见，这里是我在 jsFiddle 中使用的 HTML。这将每行排列 4 列，每列宽度为 220px(基于它们的容器宽度为 940px)。如果您想要不同的容器尺寸，只需稍微调整宽度即可。

当然这需要使用 Bootstrap CSS:

<div class="row">
  <div class="span3">Hotel 1</div>
  <div class="span3">Hotel 2</div>
  <div class="span3">Hotel 3</div>
  <div class="span3">Hotel 4</div>
  <div class="span3">Hotel 5</div>
  <div class="span3">Hotel 6</div>
</div>