javascript - 一堆 div 向左浮动，排列成不同高度的列，如果不设置高度，它们不会创建漂亮的网格

Question

我正在尝试创建一个类似网格的系统，其中包含内容向左浮动的 div。问题是每个 div 的高度不是静态的，因为每个 div 的内容都不同。由于高度不同.. 如果一排中的一个比另一个高，事情就会变得不正常。

是否有某种 css 方式或 js(首选 javascript)方式来解决这个问题。我真的想避免在 div 上设置过大的高度来让它们对齐。

您可以在此处查看示例:http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1

Answer 1

首先 - 在这种情况下使用表是不正确的:表结构定义了同一行中的数据与同一列中的数据之间的关系。由于第二列与第一列是同一类型的数据，因此这里没有表关系。

您不应该使用表格，因为您是在标记中定义布局，所以您只能有两列。例如，如果客户决定他们想要三列，或者你想为移动 View 或打印样式表显示单列列表，你需要更改标记(或者甚至有几组用于不同目的的标记)。

灵活的标记

好的 - 让我们看看您的标记。目前，您几乎已经得到了一个表结构，因为您将每一行都包装在一个 DIV 中。同样，这意味着您不能同时拥有单列或 3 或 4 列。

更灵活的解决方案是将数据标记为列表。因为它是排序的，所以有序列表是正确的选择:

<ol id="list_properties">

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

</ol>

你会得到一个 <li class="property"> “网格”中的每个元素。我也为细节建议了一些更好的标记 - 如果您愿意，请自行使用。

现在完成它:遗憾的是，如果不使用 Javascript 进行一些最终调整，就无法以跨浏览器的方式完成此操作。也就是说，JS 是不引人注目的，所以它实际上只是在最后起到了一点润色的作用。

基本样式

您的基本样式将如下所示:

#list_properties {
  list-style:none;
  margin:0;
  padding:0;
  width:960px;
  float:left;
}

#list_properties li.property{
  width:430px;
  float:left;
  margin:0 50px 50px 0;
  min-height:16em; /* For FF, Safari, Opera, IE8 */
  _height:16em; /* For IE6 */
  *height:16em; /* For IE7 */
}

重新创建列 - 在这个阶段，如果所有框的高度都小于 16em，这将是您所需要的。

Javascript 润色

为了确保一切都坚如磐石，我会使用 jQuery 的等高插件:http://www.cssnewbie.com/equalheights-jquery-plugin/基本上，您将容器 (#list_properties) 传递给它，它会扫描每个子项 (li.property)，并将每个子项的高度设置为最高项的高度。

因此，例如，一个元素具有额外信息并且需要 18em 的高度，所有其他元素也都设置为 18em。

链接的站点有启动它的文档，但是一旦你准备好 jquery 和插件，你只需要做:

$(function(){
  $('#list_properties').equalHeights();
});

以这种方式设置后，只需更改 li.property 的宽度即可修改列中的元素数。

最后的想法...

我只是在想，无论如何，按列显示此列表有什么好处？毕竟，用户可以对列表进行排序——单列列表不是更容易浏览吗？我假设用户会寻找特定的元素，而不是半随机地浏览。