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 중국어 웹사이트의 기타 관련 기사를 참조하세요!