CSS와 JavaScript를 사용하여 다중 열 텍스트 레이아웃을 만드는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-17 10:47:03
원래의
791명이 탐색했습니다.

How to Create a Multi-Column Text Layout with CSS and JavaScript?

CSS와 JavaScript를 사용한 다중 열 텍스트 레이아웃

CSS를 사용하면 텍스트가 여러 열로 흐르는 신문과 같은 레이아웃을 만들 수 있습니다. 또는 JavaScript.

CSS 전용 솔루션

CSS만 사용하여 여러 열로 구성된 텍스트를 쉽게 만들려면 다음 코드를 활용하세요.

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;
}
로그인 후 복사

JavaScript 솔루션

JavaScript를 선호하는 경우 콘텐츠 div 내의 단락(

요소) 수를 추정한 다음 그 중 절반을 오른쪽으로 이동하는 솔루션을 고려해 보세요. 그러나 이 방법은 더 복잡하며 추가적인 JavaScript 전문 지식이 필요할 수 있습니다.

위 내용은 CSS와 JavaScript를 사용하여 다중 열 텍스트 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿