gpt4 book ai didi

html - 灵活的 div,根据该容器中的 div 数量增长和收缩

转载 作者:行者123 更新时间:2023-11-28 10:26:34 26 4
gpt4 key购买 nike

我有一个元素,我有一个设置宽度为 600 像素的容器。在该容器内将有任意数量的 div(圆 Angular 看起来像圆圈)。如果容器中有 1-3 个 div,它们应该居中,最大高度和宽度为 160 像素。但是一旦超过三个,他们就会掉到另一排,我不想要这个。我需要 div 灵活并且能够缩小尺寸以容纳更多的 div,所有这些都在同一行。

希望这是有道理的,我附上了一张图片以帮助解释。我很乐意只使用 CSS 来做到这一点。

最佳答案

听起来像 display:flex; <强> DEMO

所以在父节点上,你只需要使用:display:flex;justify-content:center; child 可以调整大小并设置为 align-self: shrink; 以缩小。

display:table;+ display:table-cell; 带有 2 个空伪元素作为 display:table-cell ,为了也可以将单个 div 居中: DEMO 2

关于html - 灵活的 div,根据该容器中的 div 数量增长和收缩,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23715599/

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