0

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

如何将它们在每行上对齐为 4，但第 5 个标签正好在第一个标签下方，第 6 个标签在第二个标签下方，依此类推。每个标签都有不同的高度。通常，前 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。

4

2 回答 2

1

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

由于您在上面提到了 Twitter Bootstrap，我建议您使用他们的脚手架网格系统。举一个非常基本的例子，看看这个jsFiddle我将如何处理这个问题。

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

当然，这需要使用 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>
于 2013-04-17T16:54:04.497 回答
0

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

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/

于 2013-04-17T16:58:08.537 回答