새로운 줄바꿈이 포함된 2열 레이아웃

Question

편집 프로젝트를 위해 여러 열로 구성된 잡지 스타일 레이아웃을 시도하고 있습니다.

모니터의 크기가 계속해서 커지기 때문에 종이 잡지와 매우 유사한 레이아웃(페이지당 2~3열)을 만들어 모니터의 사용 가능한 인치를 모두 활용하고 싶었습니다.

저는 게시물 관리를 위해 TipTap Editor를 사용하고 있으며(아주 깔끔한 HTML 코드를 반환하므로) 프런트엔드에서 다음과 같은 HTML 출력을 얻습니다.

CSS 열 클래스를 사용하여 기사를 두 부분으로 나눕니다.

으아아아

그러나 결과는 이렇습니다.

다음과 같이 장을 가로로 확장할 수 있도록 모든 h2을 솔루션 단락으로 나누고 싶습니다.

의사 클래스를 사용하여 H2를 가로채는 것이 가능합니까?

Answer 1

각 장을 div에 넣는 것이 도움이 될 수 있습니다. 원하는 결과처럼 서로 쌓이게 됩니다.

HTML

으아악

CSS

으아악

코드펜: https://codepen.io/halfandhalfhd/pen/PoamByX