왼쪽 절반 및 오른쪽 하프 레이아웃 - 여러 가지 방법

몇 년 전, CSS- 트릭은 2 열 레이아웃을 만드는 다양한 방법을 탐색했습니다. 이 업데이트 된 기사는 이러한 기술에 대한 포괄적 인 개요를 제공합니다.

컨테이너 내에서 두 개의 동등한 높이 열로 레이아웃을 분할해야한다고 가정 해 봅시다. 수많은 CSS 접근법이이를 달성하며, 몇 가지를 조사 할 것입니다 업데이트 (2024 년 10 월 25 일) :

이 기사는 이제 CSS 앵커 포지셔닝을 사용하는 예제가 포함되어 있습니다. 배경 그라디언트 기술

간단한 시각적 접근 방식은 배경 기울기를 사용합니다. 한 가지 색상으로 배경의 절반을 정의하고 나머지 절반은 다른 색상으로 정의합니다. 제로 공간 색상 정지는 날카로운 분할을 만듭니다 :

이것은 단일 컨테이너와 함께 작동하지만 콘텐츠가 양쪽을 채워야하는 경우 플로트 또는 기타 레이아웃 방법이 필요합니다. 절대 포지셔닝 메소드

또는 부모 내에서 두 개의 컨테이너를 사용하여 절대적으로 배치 한 다음 백분율을 사용하여 공간을 나눕니다. 이를 통해 각 열에 대해 독립적 인 컨텐츠가 가능합니다. 그러나 부모는 고정 된 높이가 필요하므로 동적 콘텐츠에 문제가 있습니다. 절대 포지셔닝은 또한 문서 흐름에서 요소를 제거하여 다른 컨텐츠에 잠재적으로 영향을 줄 수 있습니다. (가짜) 테이블 접근 테이블은 레이아웃을 위해 구식 (및 접근성 문제를 제기)이지만 는 편리한 솔루션을 제공합니다. 부모 컨테이너는 테이블이되고, 어린이 컨테이너는 CSS로 처리 된 세포가됩니다. 이 방법은 중단 점에서 디스플레이 속성을 변경하여 다른 화면 크기에 쉽게 적응할 수 있습니다. IE8로 거슬러 올라가는 광범위한 브라우저 지원을 즐깁니다 floats를 사용하는 > floats는 절대 포지셔닝의 합병증을 피하는 또 다른 옵션을 제공합니다. 플로트는 본질적 으로이 기능을 제공하지 않지만 명시 적 높이 설정은 균일 한 열 높이를 보장합니다. 배경 구배 또는 기타 기술은 동일한 높이의 환상을 만들 수 있습니다. 적절한 문서 흐름을 유지하기 위해 부모의 부유물을 지우는 것을 잊지 마십시오.

인라인-블록 메서드 는 수레에 대한 더 깨끗한 대안을 제공하여 청소할 필요가 없습니다. 그러나 원치 않는 간격을 방지하기 위해 컬럼의 HTML 요소 사이에 공백이나 선 파손이 존재하지 않도록하십시오. 다시, 동일한 열 높이에 명시적인 높이 설정이 필요합니다. Flexbox 솔루션 Flexbox는 우아한 솔루션을 제공하지만 지원은 IE10 이상으로 제한됩니다. 부모 컨테이너는 Flexbox가되고 하위 컨테이너는 자동으로 공간을 동등하게 공유합니다. 아동 컨테이너에서 를 설정하면 동일한 분포가 보장됩니다. 이 방법은 수직 및 수평 중심을 효과적으로 처리합니다 그리드 레이아웃 고급 사용자의 경우 CSS 그리드 레이아웃은 Flexbox와 테이블 접근 방식의 유연성을 결합합니다. 컨테이너를 정의한 다음 하위 요소로 채워질 수있는 기둥과 셀로 나눕니다. CSS 앵커 포지셔닝 (new!) 최신 기능 (2024) 인 CSS 앵커 포지셔닝은 관련없는 요소를 연결할 수 있습니다. "앵커"요소가 정의되고 "대상"요소가 고정됩니다. 이것은 포지셔닝에 대한 정확한 제어를 제공합니다 :

CSS 기술의 풍부함은 다양성을 강조합니다

위 내용은 왼쪽 절반 및 오른쪽 하프 레이아웃 - 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!