CSS - 如何垂直对齐不同父对象中的子对象
要在不使用 JavaScript 的情况下垂直对齐不同父对象中的子对象，请将它们设为兄弟姐妹并使用flexbox 控制它们的顺序和 flex 基础。以下是实现此目的的方法：
更新的代码：
<code class="css">@media (min-width: 768px) {
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content > * {
flex-basis: calc(50% - 30px);
}
.content h2 {
order: 0;
}
.content p {
order: 1;
}
.content p + p {
order: 2;
flex-basis: calc(100% - 30px);
}
.content ul {
order: 3;
}
}</code>HTML 代码：
<code class="html"><div class="content"> <h2>Lorem ipsum Lorem ipsum</h2> <p>...</p> <p>...</p> <ul class="check">...</ul> <h2>Lorem ipsum</h2> <p>...</p> <ul class="check">...</ul> </div></code>
说明：
以上是如何在不使用 JavaScript 的情况下垂直对齐 CSS 中不同父元素的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！
