Question

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

不幸的是，我的物品有不同的高度，有时物品不会一直向左包裹。在示例中，我将第一个项目稍微高一些以显示问题，实际上我不知道哪个项目将是哪个高度。

如何让第二排开始向下，但始终在左侧？

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

Answer 1

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

jsFiddle Demo

进一步阅读：What’s the Deal With Display: Inline-Block?

Answer 2

要使内联使用“display:inline:block属性”，这应解决您的问题： - 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;
}

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

如果这可以解决你的问题，请告诉我。

享受！

浮动不同高度的HTML列表项

2 个答案: