gpt4 book ai didi

html - 如何让一个div的内容超过这个div的高度到下一列

转载 作者:行者123 更新时间:2023-11-28 00:38:58 25 4
gpt4 key购买 nike

如果我没有很好地提出问题,我深表歉意,我希望让自己明白。基本上我有一个元素列表,这些元素分布在每一行中。我希望当这一行超过 div 的总大小时,列表将在前面的可用空间中继续。

enter image description here

<div>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
</div>

div
{
border: 1px solid red;
height: 100px;
width:300px;
}

我该怎么做?

https://jsfiddle.net/ug0f38b1/

最佳答案

我正在使用 flexbox 解决这个问题,方向设置为 column。您需要 ul 的高度来填充父容器,以便它知道何时中断。

随着列表的增长,元素自然分布。 enter image description here

div {
border: 1px solid red;
height: 100px;
width: 300px;
}

ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
margin: 0;
}
<div>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
</div>

jsFiddle

调整列间距

为此使用 flexbox 的一个好处是我们可以将 ul 设置为 inline-flex,这样可以轻松控制列间距。

enter image description here

jsFiddle

关于html - 如何让一个div的内容超过这个div的高度到下一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54682336/

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