CSS만 사용하여 벽돌 레이아웃을 어떻게 만들 수 있나요?

CSS를 사용하여 석조 스타일 레이아웃 만들기

CSS를 통해서만 요소의 높이와 너비가 다양한 석조 스타일 레이아웃 구현 오랫동안 도전이었습니다. CSS3의 출현으로 이러한 문제는 극복되었습니다.

CSS3 솔루션

CSS3에는 열 개수를 지정할 수 있는 열 개수 속성이 도입되었습니다. 어떤 내용을 배치해야 하는지. 이 속성을 열 사이의 간격을 정의하는 column-gap 속성과 결합하면 벽돌 스타일의 레이아웃을 생성할 수 있습니다.

.container {
  column-count: 2;
  column-gap: 10px;
  width: 360px;
}

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

이 코드에서 .container 요소는 다음과 같은 두 개의 열을 정의합니다. 그 사이에 10px의 간격이 있습니다. .container div 요소는 이러한 열 내에 배치되며 각 요소는 열의 전체 너비에 걸쳐 있습니다.

비 CSS3 솔루션

안타깝게도 다음과 같은 브라우저의 경우 CSS3를 지원하지 않으므로 CSS만으로는 석조 스타일 레이아웃을 구현할 수 없습니다. 그러한 경우에는 이 목적을 위해 JavaScript 라이브러리를 사용해야 할 수도 있습니다.

위 내용은 CSS만 사용하여 벽돌 레이아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!