How to Maintain Equal Height for Columns with Different Content Lengths in CSS?

CSS: Maintaining Equal Height for Columns with Different Content Lengths

Within a two-column layout, it's desirable to align the lists within each column horizontally, even if the content lengths vary. This poses a challenge in responsive designs, as columns may break on smaller screens.

To achieve this alignment without JavaScript, a method that enables items to see each other as siblings is required. For wider screen sizes, the order of the items must be rearranged to ensure proper stacking.

Here's an updated version of your code utilizing CSS and a media query:

@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;
  }
}

This media query introduces a flexbox layout for the .content element, allowing its child elements to flexibly align and wrap. The order properties ensure that the items are stacked correctly when the columns break on smaller screens.

To add borders to the elements for visual distinction, you can use combinations of border-top, border-left, border-right, and border-bottom, adjusted with additional media queries to account for both horizontal and vertical stacking.

The above is the detailed content of How to Maintain Equal Height for Columns with Different Content Lengths in CSS?. For more information, please follow other related articles on the PHP Chinese website!