使用可变高度的左浮动 div 标签制作美观、可扩展的行
我想以漂亮、整洁、表格般的行方式显示一系列元素。每个元素都有一个固定的宽度，但有一个可变的高度（由该元素内的内容自动确定）。每个
float:left; 和 width:x;，其中 x 是所有此类 < 的相同值;div> 元素。我现在得到的结果是，如果在前一行元素中存在一个高度比后一个元素高的元素，则 div 不会一直到达下一行的开头。这是正在发生的事情（注意 Div 7 没有一直向左浮动）。
我想要的是这样的：
注意所有元素如何换行以形成漂亮的行。
我可以使用表格来完成此操作，但是我希望
clear:left; 也将不允许上述比例。我对 JavaScript 解决方案（首选 jQuery）或任何其他可能给我带来好的行的“黑客”持开放态度。
I want to display a series of elements in nice, neat, table-ish rows. Each element will have a set width but will have a variable height (determined automatically by the content inside that element). Each <div> is assigned float:left; and width:x; where x is the same value for all such <div> elements. The result I am getting now is that if in a previous row of elements there is an element with a height taller than the following element, the div does not go all the way to the beginning of the next row. Here is what is happening (notice how Div 7 does not float all the way to the left).
What I want is something like this:
Notice how all the elements wrap to make nice rows.
I could accomplish this with a table however I want the <div> elements to scale depending on the size of the browser (e.g. rows of 4 elements if the browser is wider or rows of 2 elements if it is narrower). Tables would prevent that. Selectively setting clear:left; would also not allow the scale described above.
I'm open to a JavaScript solution (jQuery preferred) or any other "hacks" that might give me nice rows.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相信，如果你只是用它自己的 div 封装每个“行”，那么一切都会就位。行 div 将增长到最大项目的高度，确保下一行不会在前一行结束之前开始。
I believe if you just encapsulate each "row" with a div of it's own everything will just kind of fall into place. The row divs will grow to the height of the largest item ensuring the next row doesn't start before the previous one ends.