스택 효과를 유지하면서 CSS에서 블록 요소를 어떻게 재정렬할 수 있습니까?

CSS를 사용하여 블록 요소 재정렬

웹 개발에서는 웹페이지 내 요소 순서를 재정렬해야 하는 경우가 있습니다. 이는 position:absolute와 같은 번거로운 방법을 사용하지 않고도 CSS를 사용하여 달성할 수 있습니다. 그러나 표시 기능을 유지하려면 블록 속성을 고려해야 합니다.

문제 설명:

3개의 블록 요소(블록 A, 블록 B 및 블록)가 있는 HTML 코드를 고려하세요. C) 수직으로 배열한다. 목표는 디스플레이: 블록의 하향 푸시 효과를 유지하면서 CSS만 사용하여 이러한 블록의 순서를 바꾸는 것입니다.

코드 조각:

<div>

CSS를 사용한 솔루션:

CSS 미디어 쿼리는 요소 동작을 기반으로 수정하는 기능을 제공합니다. 화면 크기에. 이 경우 순서 속성을 사용하여 요소를 재배열할 수 있습니다.

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

순서 값을 설정하면 소스 코드에서 위치를 변경하지 않고 요소의 표시 순서를 조작할 수 있습니다. 순서 값이 낮을수록 요소가 더 일찍 나타납니다.

예:

  
    
    
  
  
    <div>

이 예에서는 브라우저 창 너비가 다음보다 작거나 같을 때 480px, 블록 순서는 블록 C, 블록 A, 블록 B로 변경됩니다. 이렇게 하면 디스플레이가 보존됩니다: 다양한 화면 크기에 대한 블록 푸시 효과.

위 내용은 스택 효과를 유지하면서 CSS에서 블록 요소를 어떻게 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!