如何在没有 JavaScript 的情况下保持响应行的对齐

在响应行中保持兄弟姐妹的高度

当面对包含不同内容长度的列并且希望在其中保持对齐时，使用 JavaScript没有必要。通过修改CSS，我们可以创建灵活的布局，在不破坏移动端优化的情况下满足所需的功能。

关键是让每列中的项目成为直接同级，这样它们就可以“看到”彼此。然后，我们使用媒体查询根据屏幕宽度重新排列它们的顺序。这确保了在较宽的屏幕上，项目是并排的，而在较窄的屏幕上，它们是垂直堆叠的。

更新的代码：

要实现这一点，我们引入了一个内容类，它包装了每列中的所有元素：

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

内容中的各个元素被赋予自定义宽度：

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

媒体查询：

对于更宽的屏幕，我们使用媒体查询对元素重新排序并调整其​​宽度：

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

附加说明：

• 您可能需要针对不同的屏幕尺寸调整媒体查询断点和 flex-basis 值。
• 为了考虑高度不同的元素，您可以使用附加媒体查询将边框属性应用于各个元素。

以上是如何在没有 JavaScript 的情况下保持响应行的对齐的详细内容。更多信息请关注PHP中文网其他相关文章！