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>

Answer 2

我认为你需要这样的东西：

<强>的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);
    });

<强> HTML

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

<强>样本

http://jsfiddle.net/673tG/1/

如何根据上面的其他元素对齐元素

2 个答案: