CSS만 사용하여 HTML 블록 요소의 순서를 어떻게 바꿀 수 있습니까?

블록 요소 재정렬을 위한 CSS

CSS를 통해서만 HTML 블록 요소의 순서를 재정렬하는 방법을 찾는 것은 어려울 수 있습니다. 이 질문은 블록 요소로서의 표시 동작을 손상시키지 않고 세 블록의 순서를 전환하는 것을 목표로 이 문제를 다룹니다.

CSS 솔루션

제공된 솔루션은 CSS flexbox를 활용합니다. . 상위 요소를 display:flex 및 flex-flow: 열로 설정하면 요소가 수직으로 쌓이게 됩니다. 그런 다음 order 속성을 사용하여 하위 요소의 순서를 사용자 지정할 수 있습니다. 예를 들어, #a {order:2;}는 id="a"인 요소를 두 번째 위치로 이동합니다.

구현

이 솔루션을 구현하려면, 먼저 상위 요소를 플렉스 컨테이너로 표시하도록 설정합니다.

#parent { display: flex; flex-flow: column; }

다음으로 order 속성을 사용하여 하위 요소의 순서를 변경합니다. 요소:

#a { order: 2; }
#b { order: 3; }
#c { order: 1; }

미디어 쿼리 고려 사항

다양한 화면 크기를 수용하기 위해 미디어 쿼리를 사용하여 레이아웃을 제어할 수 있습니다. 예를 들어, 다음 규칙은 최대 너비가 300px인 화면의 블록 순서를 전환합니다.

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

예

다음은 다음과 같은 간단한 예입니다. 개념을 보여줍니다.

<div>

브라우저 창의 너비를 조정하여 div 요소가 변경됩니다.

위 내용은 CSS만 사용하여 HTML 블록 요소의 순서를 어떻게 바꿀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!