使用CSS和jQuery的列表项的动态，表格行 [英] Dynamic, Table-ish rows of List Items using CSS and jQuery

问题描述

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

 < style type =text / css> 
 li {
 float：left; 
 width：200px; 
} 
 li img {
 float：right; 
} 
< / style> 
 
< ul> 
< li>< h3>第一项< / h3> 
< img src =one.png> 
< p>第一项内容在这里< / p> 
< / li> 
< li>< h3>第二项< / h3> 
< img src =two.png> 
< p>第二项内容在这里< / p> 
< / li> 
< li>< h3>第三项< / h3> 
< img src =three.png> 
< p>第三项内容此处< / p> 
< / li> 
< li>< h3>第四项< / h3> 
< img src =four.png> 
< p>第四项内容在这里< / p> 
< / li> 
< li>< h3>第五项< / h3> 
< img src =five.png> 
< p>第五项内容在这里< / p> 
< / li> 
< / ul> 
< / style> 
  

我遇到的问题是，如果有足够的空间，行用于3个项目，第二个项目高于第四个项目。第四个项目不会开始一个新行，而是会放在第二个项目的右边，像这样：

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

我也想要能够缩放包含div的宽度，以便每行的项目调整为必要。例如，如果包含div更宽（即，如果用户重新调整窗口大小），每行的项目数量增加以填充该空间。以下是更宽容器上相关问题的示例：

这里是我想要的：

根据上一个问题，我不要认为有一个简单的解决方案，所以我想使用jQuery来完成它。

我想是使用jQuery做一些像：

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

  var elementWidth = 200; // 200px 
  

步骤2.设置一个变量 containerWidth 整个容器

  var containerWidth = $（'＃container'）。 
  

步骤3.用 elementWidth em>确定每行元素的数量

  var elementsPerRow = containerWidth / elementWidth; 
  

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

  for（x = 0，x <所有元素），x + elementsPerRow）{
 //设置清除：左到此< li> 
} 
  

我不太好（一个完整的初学者）使用JavaScript和jQuery。有人可以帮我把这个一起编成一个很好的代码，我可以复制和粘贴（和学习）。

谢谢！

$ b $问题是，你试图使用 float：left 当你应该使用

code> display：inline-block 。也不需要使用javascript。

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

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

I have a list of content items, each with a set width but different (variable) heights. Each item in the list will be floated left. The HTML and CSS are as follows:

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

The problem I have has to do with the way the items float left if there is enough space in a row for 3 items and the second item is taller than then fourth item. The fourth item won't start a new row but will instead place to the right of the second item like this:

What I want is for the list-items to form a sort of table-like structure that will align each row nicely after the previous row at a height equal to the tallest item of the previous row. Instead of what I have above, I want it to look like this:

I would also like to be able to scale the width of the containing div such that the items-per-row adjust as necessary. For example, if a containing div is made wider (ie. if the user re-sizes the window) the number of items per row increases to fill the space. Here is an example of the related problem on a wider container:

And here is what I want it to do:

Based on a previous question, I don't think there is an easy solution to this so I want to use jQuery to get it done.

What I'm thinking is using jQuery to do something like:

Step 1. Set the width of each element to elementWidth

var elementWidth = 200; // 200px

Step 2. Set a variable containerWidth to the width of the overall container

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

Step 3. Divide the containerWidth by the elementWidth to determine the number of elements per row

var elementsPerRow = containerWidth / elementWidth;

Step 4. Add the property clear:left; each elementsPerRow-ith list item

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

I'm not very good (a complete beginner) with JavaScript and jQuery. Can someone please help me put this together into a nice piece of code I can copy and paste (and learn from).

Thank you!

解决方案

The problem is that you're trying to use float: left when you should be using display: inline-block. There's no need for using javascript either.

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

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

这篇关于使用CSS和jQuery的列表项的动态，表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！