6

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

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

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

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

2 回答 2

13

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

jsFiddle 演示

进一步阅读：与显示有什么关系：内联块？

于 2013-09-13T14:49:18.237 回答
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/

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

享受！

于 2013-09-13T15:02:27.907 回答