Javascript 如何对齐<；tr>；基于其他元素的元素<；tr>；上面的元素

我有20个左右的标签，它们都有绝对位置。它们是根据我从XML得到的响应动态生成的，并且它们当前彼此对齐

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

结构如下：

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

---

我怀疑CSS可以实现这一点，所以我考虑JQuery。我试过的所有方法都只会使它们4乘4重叠。

正如我在上面的评论中提到的，我强烈建议不要为此使用

表。看起来您并不是在用表格数据填充它，所以您只是将它用作布局工具。对于你想做的事情来说，这是一个非常糟糕的工具

既然您在上面提到了Twitter引导，我建议您使用他们的。为了给出一个非常基本的例子，请看一下我将如何处理这个问题

为了完整起见，这里是我在JSFIDLE中使用的HTML。这将每行排列4列，每列的宽度为220px（基于它们的容器宽度940px）。如果需要不同的容器大小，只需稍微调整宽度

当然，这需要使用引导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>


1号酒店
2号酒店
3号酒店
4号酒店
5号酒店
6号酒店
我想你需要这样的东西：

jQuery

  $(document).ready(function () {
    $mt = $('<table>').attr('id', 'myTable');
    for (var y = 0; y < 5; y++) {
     var $row = $("<tr>").appendTo($mt);
        for (var x = 0; x < 4; x++) {
           $row.append($('<td/>').text(y * 4 + x + 1).appendTo($mt));
        }
         $mt.append($row);
      }
      $("#myTable").html($mt);
    });

$（文档）.ready（函数（）{
$mt=$（''）.attr（'id'，'myTable'）；
对于（变量y=0；y<5；y++）{
var$row=$（“”）。appendTo（$mt）；
对于（变量x=0；x<4；x++）{
$row.append（$（''）.text（y*4+x+1）.appendTo（$mt））；
}
$mt.append（$row）；
}
$（“#myTable”）.html（$mt）；
});

HTML

<table id="myTable">
</table>



演示

您的TDs在哪里？您的HTML示例不完整。请注意，我尝试了Bootstrap Fluid Layout，但结果不符合预期。它根据上面的一行对齐整行。我正在寻找一种基于上面的方法来对齐元素。行的内容是什么？是表格数据吗？如果没有，我建议您不要使用
s/
s用于布局，而使用
s或
/

sIs

位置：绝对的

必要吗？我不明白您为什么要浮动行？谢谢您的建议。我已经尝试过这个选项，因为我用

class='row'

将4个tr元素包装到一个div中，并将每个tr元素的类设置为'span3'，但它没有像我预期的那样工作。我之所以使用表，是因为我的web应用程序是用Java开发的，我使用的是JSF，所以为了生成我正在使用的行：我寻找了一个可以使用div和span的替代方法，但找不到，所以我只能使用表。当然，Twitter引导脚手架在

tr

s上不起作用。这就是为什么我用

div

s给你举了一个例子。我对JSF了解不多，但是在一些

div

s上循环而不是在表上循环不会那么困难。我宁愿花时间创建正确的HTML，而不是花很多时间寻找一种方法来正确排列您的表。。。但那只是我，很公平。谢谢你，先生，我想我宁愿这样做，也不愿尝试找到一个黑客。这是可行的，但并不完全是我想要的。谢谢你抽出时间。我会选择史蒂夫的答案，因为我会接受他的建议。谢谢

<table id="myTable">
</table>