CSS를 사용하여 2열 텍스트 레이아웃을 자동으로 생성하려면 어떻게 해야 합니까?

CSS를 사용하여 자동으로 텍스트를 두 열로 넘김

두 열로 원활하게 흐르는 텍스트 레이아웃을 만들려면 CSS의 기능을 활용하는 것이 좋습니다. . 여러 div를 사용하는 기존 방법과 달리 CSS는 추가 HTML 요소 없이 원하는 결과를 얻을 수 있는 우아한 솔루션을 제공합니다.

해결책은 CSS 속성인 컬럼 개수를 활용하는 데 있습니다. 이 속성을 값 2로 설정하면 텍스트를 두 개의 동일한 열로 나눌 수 있습니다. 미적 매력을 높이기 위해 열 간격을 지정하여 열 사이에 간격을 추가하고 열 규칙을 지정하여 열을 구분하는 수직선을 만들 수도 있습니다.

다음은 CSS의 모양에 대한 예입니다.

div.multi {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

multi 클래스를 사용하면 CSS가 자동으로 텍스트를 두 열로 넘치게 하여 신문과 유사한 시각적으로 매력적인 레이아웃을 만듭니다.

위 내용은 CSS를 사용하여 2열 텍스트 레이아웃을 자동으로 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html count for using class Property this overflow column

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.