具有不同高度的浮动 HTML 列表项答案

【问题标题】：Floating HTML list items with different height具有不同高度的浮动 HTML 列表项
【发布时间】：2013-09-13 23:02:27
【问题描述】：

我想根据可用宽度将列表项浮动到类似网格的结构中。

不幸的是，我的物品高度不同，有时物品不会一直包裹到左侧。在示例中，我将第一项设置得高一点以显示问题，实际上我不知道哪个项目将是哪个高度。

我怎样才能让第二行开始往下一点，但总是在左边？

<html>
<head>
<style>
li {display: block; width:200px; height:100px; float:left; border:1px solid;}
</style>
</head>
<body>
<ul>
<li style="height:110px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

【问题讨论】：

请为此创建一个 Jsfiddle，以便我们能够调查您的问题jsfiddle.net

标签： html css css-float html-lists

【解决方案1】：

使用display: inline-block 代替float: left/right

jsFiddle Demo

延伸阅读：What’s the Deal With Display: Inline-Block?

【讨论】：

【解决方案2】：

要内联使用“display:inline:block property”，这应该可以解决您的两个问题：- 1) 排队 2) 元素之间也有间距

但如果您认为所有对象可能具有不同的高度，我建议您使用“vertical-align:top”和“margin-bottom:5px”来提供空间，因为vertical-align:top 也会删除行之间的空间。

这里是代码：-

HTML：

    <ul>
<li style="height:110px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS：

li {
   display: inline-block; 
   width:200px; 
   height:100px; 
   border:1px solid; 
   vertical-align:top; 
   margin-bottom:5px;
}

您可以在此处参考 Fiddle：- http://jsfiddle.net/aasthatuteja/2Uygc/

如果这能解决您的问题，请告诉我。

享受吧！

【讨论】：

太棒了，谢谢，正是我想要的。因为我希望一切都与顶部对齐。它使用 Float 而不是 Inline-block。