CSS 다중 열 레이아웃 속성: 열 개수 및 열 간격-CSS 튜토리얼-php.cn

CSS 다중 열 레이아웃 속성: 열 개수 및 열 간격

PHPz

풀어 주다： 2023-10-28 08:35:33

원래의

1644명이 탐색했습니다.

CSS 多列布局属性：column-count 和 column-gap

CSS 다중 열 레이아웃 속성: 열 수 및 열 간격, 특정 코드 예제가 필요합니다.

프론트 엔드 개발에서 다중 열 레이아웃 구현은 매우 일반적인 요구 사항입니다. CSS에는 다중 열 레이아웃을 쉽게 구현하는 데 도움이 되는 두 가지 속성이 있는데, 그것은 열 개수(column-count)와 열 간격(column-gap)입니다.

column-count 속성

column-count 속성은 요소의 내용을 몇 개의 열로 나누어 표시할지 지정하는 데 사용됩니다. 콘텐츠를 나눌 열 수를 나타내는 양의 정수 값을 허용합니다. column-count 속성이 설정되면 브라우저가 자동으로 열 수를 계산하고 레이아웃하는 데 도움을 준다는 점은 주목할 가치가 있습니다.

다음은 예입니다.

HTML 코드:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

로그인 후 복사

CSS 코드:

.columns {
  column-count: 3;
}

로그인 후 복사

위 코드는

요소에 포함된 단락 텍스트를 3개의 열로 나누어 표시합니다. 브라우저는 다중 열 표시를 달성하기 위해 열의 길이와 수에 따라 콘텐츠를 자동으로 레이아웃합니다.

column-gap 속성

column-gap 속성은 열 사이의 거리를 지정하는 데 사용됩니다. 열 사이의 간격을 나타내는 길이 값을 허용합니다. 픽셀 값, 백분율 또는 키워드를 사용하여 해당 거리를 설정할 수 있습니다.

다음은 예입니다.

HTML 코드:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

로그인 후 복사

CSS 코드:

.columns {
  column-count: 3;
  column-gap: 20px;
}

로그인 후 복사

위 코드는

요소에 포함된 단락 텍스트를 3개의 열로 나누어 표시합니다. 각 열 사이의 간격은 20픽셀입니다.

요약:

column-count 및 column-gap 속성을 사용하면 다중 열 레이아웃을 쉽게 구현할 수 있습니다. column-count는 내용을 몇 개의 열로 나눌 것인지 지정하는 데 사용되며, column-gap은 열 사이의 거리를 지정하는 데 사용됩니다. 이 두 가지 속성은 다중 열 레이아웃 효과를 빠르게 달성하고 우수한 제어성을 갖는 데 도움이 될 수 있습니다.

위 내용은 CSS 다중 열 레이아웃 속성인 열 개수 및 열 간격에 대한 소개입니다. 도움이 되길 바랍니다. 더 나은 레이아웃 효과를 얻기 위해 실제 프로젝트에서 이러한 속성을 사용해 보는 것은 누구나 환영합니다.

위 내용은 CSS 다중 열 레이아웃 속성: 열 개수 및 열 간격의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!