使用CSS和jQuery的List Item的动态，表格行

Question

我有一个内容项列表，每个内容项都有一个设置宽度但不同（可变）的高度。列表中的每个项目都将向左浮动。 HTML和CSS如下：

<style type="text/css">
  li{
    float: left;
    width: 200px;
  }
  li img{
  float: right;
  }
</style>

<ul>
  <li><h3>Item One</h3>
      <img src="one.png">
      <p>First item content here</p>
  </li>
  <li><h3>Item Two</h3>
      <img src="two.png">
      <p>Second item content here</p>
  </li>
  <li><h3>Item Three</h3>
      <img src="three.png">
      <p>Third item content here</p>
  </li>
  <li><h3>Item Four</h3>
      <img src="four.png">
      <p>Fourth item content here</p>
  </li>
  <li><h3>Item Five</h3>
      <img src="five.png">
      <p>Fifth item content here</p>
  </li>
</ul>
</style>

我遇到的问题与物品浮动的方式有关，如果一行中有足够的空间用于3个物品，而第二个物品高于第四个物品。第四项不会开始新行，而是会放在第二项的右侧，如下所示：

我想要的是list-items形成一种类似于表的结构，它将在前一行之后很好地对齐每一行，其高度等于前一行的最高项。而不是我上面所说的，我希望它看起来像这样：

我还希望能够缩放包含div的宽度，以便每行调整一次。例如，如果使包含div更宽（即，如果用户重新调整窗口大小），则每行的项目数量增加以填充空间。以下是更广泛容器上相关问题的示例：

这就是我想要它做的事情：

基于之前的问题，我认为没有一个简单的解决方案，所以我想使用jQuery来完成它。

我在想的是使用jQuery做类似的事情：

步骤1.将每个元素的宽度设置为 elementWidth

var elementWidth = 200; // 200px

步骤2.将变量 containerWidth 设置为整个容器的宽度

var containerWidth = $('#container').width();

步骤3.将 containerWidth 除以 elementWidth 以确定每行的元素数量

var elementsPerRow = containerWidth / elementWidth;

步骤4.添加属性clear：left;每个 elementsPerRow - 列表项

for(x = 0, x < (total number of all elements), x + elementsPerRow){
  // set clear:left to this <li>
}

我用JavaScript和jQuery不是很好（一个完整的初学者）。有人可以帮我把这些组合成一个很好的代码片段，我可以复制和粘贴（并学习）。

Answer 1

问题是您在使用float: left时尝试使用display: inline-block。也没有必要使用javascript。

li { 
    vertical-align: top;
    display: inline-block; }

请参阅：http://jsfiddle.net/Wexcode/zgNkA/