CSS3 열은 유용한 열 레이아웃입니다.

CSS는 HTML 마크업 언어에 대한 스타일 설명을 제공하여 해당 요소가 표시되는 방식을 정의합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다. CSS에는 항상 골치 아픈 문제가 있었습니다. 즉, 레이아웃을 만드는 것이 번거롭기 때문입니다. 물론 다양한 레이아웃을 만드는 방법과 기술은 많지만, 우리는 레이아웃을 더 잘 관리할 수 있도록 CSS가 몇 가지 새로운 속성을 제공해야 한다고 항상 생각합니다. 다행스럽게도 CSS3는 열 레이아웃을 생성하기 위한 일련의 새로운 열 속성을 제공하므로 더 이상 제어를 위해 float,clear,margin 및 기타 속성을 사용할 필요가 없으므로 많은 문제가 발생하지 않습니다.

CSS 코드

CSS3의 열 계열 속성은 다양한 기능을 제공합니다. 이를 조합하여 사용하면 해당 열 레이아웃을 얻을 수 있습니다.

column-count: 열 수

column-gap: 간격의 너비. 각 열 사이

column-width: 권장 너비는 사용되지 않을 수 있으며, 브라우저는 이 값을 기준으로 계산합니다.

column-rule-width: 열 사이를 구분하는 선의 너비

column-rule-style: 사이에서 columns 열 사이 구분선 스타일

column-rule-color: 열 사이의 선 구분 시연

column-span: 요소의 너비를 여러 열에 걸쳐 허용

column-fill: 열 분리 방법

아름다운 열을 만들려면 열 레이아웃의 경우 최소한 열 수와 열 간격을 사용해야 합니다.

/* 열 3개, 각 열 사이의 간격 10px*/ul.col-3 {

column-count: 3;
column-gap: 10px;}

열 사이의 공간을 아름답게 만들고 싶다면 열 간격도 매우 간단합니다.

/* 3개 열, 각 열 사이에 10px 간격, 황금색 분리선 포함 */ul.col-3 {

column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;}

지정된 요소는 여러 열에 걸쳐 있을 수도 있습니다.

/* 다음 HTML을 예로 들어 보겠습니다.

<div>
<h3>表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div>

*/div.col-3 {
column-count: 3;
column-gap: 5px;}div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;}

는 매우 간단하며 표시된 결과는 예상한 것과 정확히 같습니다!

CSS3 열을 사용하여 페이지 레이아웃을 만들면 많은 이점이 있습니다. 너비를 계산할 필요가 없고, 콘텐츠가 레이아웃을 깨뜨릴지 걱정할 필요도 없습니다. 시스템이 이러한 수학적 문제를 자동으로 계산해 줍니다. 또 다른 하나는 명확하고 깔끔한 의미론입니다.

위 내용은 CSS3 컬럼 생성 페이지 레이아웃에 대한 내용으로, 모든 분들께 도움이 되었으면 좋겠습니다.

관련 권장 사항:

CSS3 및 JS를 사용하여 상승 사각형 동적 배경을 만드는 방법

CSS3의 주요 기능 응용

CSS3을 사용하여 반응형 레이아웃을 만드는 방법

위 내용은 CSS3 열은 유용한 열 레이아웃입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!