如何在CSS中保持不同内容长度的列的高度相等？

CSS：保持不同内容长度的列的高度相等

在两列布局中，最好将每个列中的列表对齐水平列，即使内容长度不同。这对响应式设计提出了挑战，因为列可能会在较小的屏幕上中断。

要在没有 JavaScript 的情况下实现这种对齐，需要一种使项目能够将彼此视为兄弟姐妹的方法。对于更宽的屏幕尺寸，必须重新排列项目的顺序以确保正确堆叠。

这是使用 CSS 和媒体查询的代码的更新版本：

@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
}

此媒体查询为 .content 元素引入了 Flexbox 布局，允许其子元素灵活对齐和换行。顺序属性确保当列在较小的屏幕上中断时，项目可以正确堆叠。

要向元素添加边框以进行视觉区分，可以使用 border-top、border-left、border-right 的组合和 border-bottom，通过附加媒体查询进行调整，以考虑水平和垂直堆叠。

以上是如何在CSS中保持不同内容长度的列的高度相等？的详细内容。更多信息请关注PHP中文网其他相关文章！