如何让外层section高度随inline-block列表自适应，窗口缩放也生效？

问题根源 #

你遇到的重叠问题核心是给ul设置了固定的height:25vw：当窗口缩小，列表项换行成两行时，ul的固定高度无法容纳两行内容，导致列表元素溢出ul容器，而外层section的高度由ul的固定高度决定，自然不会跟随列表的实际高度变化，最终和下方section内容重叠。

修复方案 #

方案1：修复inline-block布局（保留原有布局逻辑）

移除ul的固定高度，同时解决inline-block元素默认的空白间距问题：

section {
   min-height:100vh; /* 保留最小窗口高度需求 */
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 100%;
   height: auto; /* 移除固定高度，让ul自适应内容高度 */
   font-size: 0; /* 消除inline-block元素间的空白间距 */
}

li {
   display: inline-block;
   vertical-align: top;
   margin: 15px;
   font-size: 16px; /* 恢复li的字体大小，避免继承ul的0值 */
}

.imageHere {
   width: 10vw;
   height: 25vw;
}

方案2：改用Flex布局（更简洁，无间距问题）

Flex布局天生支持自动换行，且不会有inline-block的空白间距问题，推荐使用：

section {
   min-height:100vh;
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 100%;
   display: flex; /* 启用flex布局 */
   flex-wrap: wrap; /* 允许列表项换行 */
   gap: 15px; /* 控制列表项之间的间距，替代margin */
}

li {
   vertical-align: top;
}

.imageHere {
   width: 10vw;
   height: 25vw;
}

为什么之前的尝试无效？ #

你给section设置height:auto没效果，是因为section的高度由直接子元素ul的高度决定，而ul被固定了height:25vw，无论内部列表项如何换行，ul的高度都不会变化，所以section的高度也不会跟着调整。

内容的提问来源于stack exchange，提问作者Nicole L