CSS만 사용하여 블록 요소를 어떻게 재정렬할 수 있나요?

CSS를 사용하여 블록 요소 순서 전환

이 시나리오에서는 세 개의 블록 요소가 수직으로 배열된 HTML 코드가 제공됩니다. 블록 A , Block B 및 Block C. 문제는 display:block을 유지하면서 CSS만 사용하여 이러한 요소를 특정 순서로 재정렬하는 것입니다.

CSS 미디어 쿼리를 사용하면 화면 너비에 따라 요소에 순서 속성을 선택적으로 적용할 수 있습니다. 예를 들어, 아이폰 앱 광고가 모바일 기기에 먼저 표시되어야 하는 시나리오를 고려하면 다음과 같이 구현할 수 있습니다.

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1; /* Move Block C to the top */
  }
}

이제 화면 너비가 480px 이하일 때 Block C 블록 A와 블록 B 위에 렌더링됩니다. 이렇게 하면 블록 요소의 동작을 손상시키지 않고 원하는 재정렬을 달성할 수 있습니다.

다음은 modern을 사용한 보다 자세한 예입니다. CSS:

<div>

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a {
    order: 2;
  }
  #c {
    order: 1;
  }
  #b {
    order: 3;
  }
}

이 예에서 화면 너비가 300px 이하로 줄어들면 요소는 블록 C, 블록 A, 블록 B로 재정렬됩니다. Flexbox 레이아웃은 다음을 보장합니다. 요소는 블록 형태로 수직으로 쌓이고 자연스러운 높이와 너비를 유지합니다.

위 내용은 CSS만 사용하여 블록 요소를 어떻게 재정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!