javascript – 使用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个项目的行中有足够的空间而第二个项目比第四个项目高,那么我的问题与项目向左浮动的方式有关.第四项不会开始新行,而是会放在第二项的右侧,如下所示：

我想要的是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-ith列表项

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; }

见：http://jsfiddle.net/Wexcode/zgNkA/