집 > 기사 > 웹 프론트엔드 > CSS3 다중 열 레이아웃의 열 관련 속성 정보

CSS3 다중 열 레이아웃의 열 관련 속성 정보

CSS3에는 다중 열 레이아웃을 구현할 수 있는 속성이 추가되었습니다

이전 구현은 매우 번거롭고 다양한 위치 지정이 필요할 수 있습니다
이제는 하나의 속성만 필요합니다
우리 신문 레이아웃과 유사한 다중 열 레이아웃
이것은 독자가 보기에 편리할 수 있습니다

다중 열 번호 및 다중 열 너비

한 줄의 텍스트가 너무 길어서 이렇게 읽고 싶지 않을 수도 있습니다

<p class="demo">......</p>

.demo {    width: 600px;    height: 200px;    border: 1px solid black;}

다중 열 개수 열-count 원하는 열 수
브라우저가 적절한 열 너비를 자동으로 설정합니다.

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-count: 3; /*增*/}

column-width를 사용하여 열 너비를 설정하지 않고 설정할 수도 있습니다.
열 수를 지정하고 위 코드는 동일합니다

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-width: 11em; /*改*/}

설정한 너비 값이 전체 요소를 채울 만큼 충분하지 않은 경우
브라우저는 가장 큰 너비를 사용하여 열 수가 전체 요소를 채울 수 있는지 확인하세요
예를 들어 위의 11em 변경 사항이 10em이면 브라우저에도 3열 레이아웃이 표시됩니다.

column-count 및 column-width는 복합 속성 열로 결합될 수 있습니다.
열은 이 속성인 너비, 열 수 또는 둘 다를 통해 설정할 수 있습니다
그러나 일반적인 사용의 경우 속성 중 하나를 설정하면 다음을 충족할 수 있습니다. 필요

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    /*或者columns: 11em;*/
    /*或者columns: 11em 3;*/}

여러 열 레이아웃 열과 열 사이에 간격이 있습니다
기본 간격은 1em입니다
열 간격을 통해 열 간격을 제어할 수 있습니다. 속성

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-gap: 2em; /*增*/}

열 간격을 너무 크게 설정하면 텍스트가 넘칠 수 있으니 주의하세요
그래서

텍스트에 제목 요소를 추가하고 높이를 변경합니다

<p class="demo"><h1>Angel Beats</h1>......</p>

.demo {    width: 600px;    height: 280px;/*改*/
    border: 1px solid black;    columns: 3;}

기본적으로 h1 요소는 첫 번째 열만 차지합니다.
여러 열 위에 표시하려면 어떻게 해야 할까요? 열?

h1 요소의 스타일 설정

h1 {    column-span: all; <--
    text-align: center;}

column-span은 요소가 걸쳐 있는 열 수를 지정할 수 있습니다. 기본 속성 값은 1입니다.
Set For all, 요소가 모든 열에 걸쳐 있도록 할 수 있습니다.

열 사이의 간격이 너무 지루하다고 생각되면
열 사이에 열 간격을 쌓을 수 있습니다. -rule Set "Rule"
이 속성은 다음 하위 속성이 있는 복합 속성입니다:

은 테두리 속성

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-rule: 1px solid black;}

이렇게 열 사이에 1픽셀 너비의 검은색 실선을 사용합니다

픽셀 설정 외에도 열-규칙-너비에도 3가지 키워드가 있습니다: 얇은, 다음 키워드

none none

CS3의 다중 열 레이아웃은 덜 사용되지만

가장 기본적인 속성을 알아야 합니다

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

성명：