gpt4 book ai didi

html - 具有不同高度的 float HTML 列表项

转载 作者:太空狗 更新时间:2023-10-29 14:44:02 25 4
gpt4 key购买 nike

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

不幸的是,我的元素高度不同,有时元素没有一直包裹到左边。在示例中,我将第一项提高了一点以显示问题,实际上我不知道哪个元素将是哪个高度。

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

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

最佳答案

使用display: inline-block而不是 float: left/right

jsFiddle Demo

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

关于html - 具有不同高度的 float HTML 列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18789206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com