如何在不使用 JavaScript 的情况下垂直对齐 CSS 中不同父元素的元素？

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>

说明：

• 在宽度大于 768px 的屏幕上，内容显示为 Flex 项目，其顺序由 order 属性决定。
• flex-basis 设置 Flex 项目的宽度每个项目，但为空 p 元素设置 100% 宽度，以确保其填充可用空间。
• 通过使内容 div 中的元素成为同级，它们能够垂直对齐。
• 根据需要自定义媒体查询中的断点以匹配 Bootstrap。
• 您还可以使用边框属性向元素添加边框，并使用媒体查询调整它们以支持垂直和水平对齐。

以上是如何在不使用 JavaScript 的情况下垂直对齐 CSS 中不同父元素的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！