我正在尝试重新创建高度不等的DIV的对齐。这里是JSFiddle链接：JSFiddle

根据给出的示例，如果只有1个子元素，则应居中，否则子元素应在2列中并排。我使用Flex实现了这一点，但我面临的一个问题是，如果孩子的身高很大，就会留下一个很大的空间，如“摆弄div

SCSS代码：

<代码>正文{背景：灰色；}.容器{最大宽度：500px；UL{list-style-type：无；背景：白色；填充：30px；显示：Flex；Flex-Wrap：缠绕；Justify-content：中心；>；李{边框：2px纯黑色；宽度：42%；高度：适合内容；填充：5px；边距：10px；}}}

HTML：

<代码><；DIV类="；容器"；>；<；UL类="；父级"；>；<；Li>；孩子1<；/Li>；<；/UL>；<；/DIV>；<；DIV类="；容器"；>；<；UL类="；父级"；>；<；Li>；孩子1<；/Li>；<；Li>；子2子2<；/Li>；<；/UL>；<；/DIV>；<；DIV类="；容器"；>；<；UL类="；父级"；>；<；Li>；孩子1<；/Li>；<；Li>；子2子2<；/Li>；<；Li>；子儿童子儿童子儿童子子儿童子子V子子子子子子子子儿子子儿子子儿子儿子<；/Li>；<；Li>；子项子项<；/Li>；<；Li>；子项子项<；/Li>；<；Li>；此框上方的奇怪空间<；/Li>；<；Li>；子项子项<；/Li>；<；/UL>；<；/DIV>；

顺晟科技：

我想你要求的是两根柱子等高。删除body { background: grey; } .container { max-width: 500px; ul { list-style-type: none; background: white; padding: 30px; display: flex; flex-wrap: wrap; justify-content: center; >li { border: 2px solid black; width: 42%; height: fit-content; padding: 5px; margin: 10px; } } } 来自<div class="container"> <ul class="parent"> <li>child 1 </li> </ul> </div> <div class="container"> <ul class="parent"> <li>child 1 </li> <li>child 2 child 2</li> </ul> </div> <div class="container"> <ul class="parent"> <li>child 1 </li> <li>child 2 child 2</li> <li>child child child child child child child child v child child child child child child child child child child child child child child </li> <li>child child</li> <li>child child</li> <li>weird space above this box</li> <li>child child</li> </ul> </div> CSS块和高度应增长到相等。

您可以从子对象中删除高度属性。这将导致双方的孩子采取充分的高度。

高度：适合内容；