CSS3 튜토리얼 - 다중 열

안녕하세요! 친구 여러분, 지난 기사에서 CSS3 튜토리얼 애니메이션 지식을 이해하셨나요? CSS3의 새로운 다중 열 레이아웃은 기존 HTML 웹 페이지의 블록 레이아웃 모드를 강력하게 확장한 것입니다. 이 새로운 구문을 사용하면 웹 프런트 엔드 개발자가 여러 열에 텍스트를 쉽게 표시할 수 있습니다.

CSS3 다중 열:

CSS3을 사용하면 신문처럼 여러 열을 만들어 텍스트 레이아웃을 지정할 수 있습니다!

이 장에서는 다음과 같은 다중 열 속성을 학습합니다.

1. 열 개수

3. 열 규칙.

브라우저 지원:

Internet Explorer 10 및 Opera는 다중 열 속성을 지원합니다.

Firefox에는 접두사 -moz-가 필요합니다.

Chrome 및 Safari에는 접두사 -webkit-이 필요합니다.

참고: Internet Explorer 9 이하에서는 다중 열 속성을 지원하지 않습니다.

CSS3은 여러 열을 생성합니다.

column-count 속성은 요소를 구분해야 하는 열 수를 지정합니다.

예:

텍스트를 입력합니다. 세 개의 열로 구분된 div 요소:

CSS3은 열 사이의 간격을 지정합니다.

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

column-gap 속성은 열 사이의 간격을 지정합니다.

예:

열 사이에 40픽셀 간격 지정:

CSS3 열 규칙:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

column-rule 속성은 열 사이의 너비, 스타일 및 색상 규칙을 설정합니다.

예:

열 사이의 너비, 스타일 및 색상 규칙 지정:

새로운 다중 열 속성:

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

아래 표 모든 변환 속성 목록은 다음과 같습니다:

위 내용은 CSS3 튜토리얼(다열)의 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!