使用 CSS 和 jQuery 的动态、表格式列表项行

我有一个内容项列表，每个内容项都有设定的宽度但不同（可变）的高度。列表中的每个项目都会向左浮动。 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 个项目，并且第二个项目比第四个项目高。第四个项目不会开始一个新行，而是放置在第二个项目的右侧，如下所示：

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

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

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

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

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

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

var elementWidth = 200; // 200px

步骤 2. 设置变量容器宽度到整个容器的宽度

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

步骤 3. 划分容器宽度 by the 元素宽度确定每行的元素数量

var elementsPerRow = containerWidth / elementWidth;

步骤4.添加属性clear:left;每个每行元素-第i个列表项

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

我不太擅长（完全的初学者）JavaScript 和 jQuery。有人可以帮助我将其组合成一段很好的代码，我可以复制和粘贴（并从中学习）。

问题是你正在尝试使用float: left当你应该使用display: inline-block。也不需要使用 javascript。

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

See: http://jsfiddle.net/Wexcode/zgNkA/ http://jsfiddle.net/Wexcode/zgNkA/