내용을 유지하면서 DIV 컨테이너를 제거하려면 어떻게 해야 합니까?

요소를 유지하면서 DIV를 제거할 수 있나요?

질문:

여러 요소를 포함하는 div입니다. 작은 화면에서 볼 때 해당 요소가 컨테이너 div 외부에 나타나도록 해야 합니다. 현재 HTML을 복제하고 뷰포트 크기에 따라 하나의 버전을 숨기고 있는데 이는 이상적인 솔루션이 아닙니다. 이 결과를 얻을 수 있는 더 좋은 방법이 있습니까?

답변:

예, 디스플레이를 사용할 수 있습니다: 내용; 속성을 사용하여 원하는 효과를 얻을 수 있습니다.

디스플레이: 내용; 속성은 요소의 자식이 요소 부모의 직계 자식인 것처럼 표시되도록 하는 최신 속성입니다. 즉, 렌더링 시 요소 자체를 무시합니다. 이는 스타일 지정을 위해 특정 요소를 함께 유지하지만 문서 흐름에서 컨테이너를 제거하려는 경우에 유용할 수 있습니다.

예:

다음은 다음과 같습니다. display:contents를 어떻게 사용할 수 있는지에 대한 예; 하나의 div를 제거하고 해당 요소를 외부에 유지하려면:

.container {
  display: flex;
}

.one {
  display: contents;
}

.one p:first-child {
  order: 2;
}

<div class="container">
  <div class="one">
    <p>Content 1</p>
    <p>Content 3</p>
  </div>
  <p>Content 2</p>
</div>

이 예에서 컨테이너 div는 하위 항목을 한 행에 정렬하고 하나의 div 내의 p 요소는 순서대로 정렬됩니다. 순서 속성에 따라 스스로를 결정합니다. 첫 번째 p 요소는 하나의 div 내에서 시각적으로 그룹화되어 있더라도 두 번째 p 요소 다음에 나타납니다.

위 내용은 내용을 유지하면서 DIV 컨테이너를 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!