CSS에서 콘텐츠 길이가 다른 열의 높이를 동일하게 유지하는 방법은 무엇입니까?

CSS: 콘텐츠 길이가 다른 열에 대해 동일한 높이 유지

2열 레이아웃 내에서는 각 열 내에서 목록을 정렬하는 것이 바람직합니다. 콘텐츠 길이가 다양하더라도 열을 가로로 정렬합니다. 작은 화면에서는 열이 깨질 수 있으므로 이는 반응형 디자인에 문제가 됩니다.

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 레이아웃을 도입하여 해당 하위 요소를 유연하게 정렬하고 래핑할 수 있습니다. 순서 속성은 작은 화면에서 열이 나누어질 때 항목이 올바르게 쌓이도록 보장합니다.

시각적 구별을 위해 요소에 테두리를 추가하려면 테두리 상단, 테두리 왼쪽, 테두리 오른쪽 조합을 사용할 수 있습니다. , 테두리 하단, 수평 및 수직 스택을 모두 고려하기 위해 추가 미디어 쿼리로 조정되었습니다.

위 내용은 CSS에서 콘텐츠 길이가 다른 열의 높이를 동일하게 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!