CSS3 다중 열 레이아웃을 구현하는 방법은 무엇입니까? CSS3 다중 열 레이아웃(열) 구현 방법-CSS 튜토리얼-php.cn

CSS3 다중 열 레이아웃을 구현하는 방법은 무엇입니까? CSS3 다중 열 레이아웃(열) 구현 방법

不言

풀어 주다： 2018-10-17 11:29:59

원래의

2549명이 탐색했습니다.

프런트 엔드 레이아웃을 할 때 때로는 열 형태로 텍스트를 표시해야 할 때가 있습니다. CSS3의 새로운 속성 열이 나타나기 전에는 다중 열 텍스트 표시 구현이 여전히 번거로웠지만 CSS3에서 열 레이아웃이 등장했습니다. made 다열 텍스트 표시가 더 간단해졌습니다. 다음 기사에서는 css3c의 olumns 속성으로 구현된 다열 레이아웃을 소개하겠습니다. 먼저 css3 열 레이아웃의 관련 속성을 살펴보겠습니다.

css3 학습 매뉴얼

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

column-fill: 열을 채우는 방법을 지정합니다. auto의 기본값은 각 열의 높이가 내용에 따라 자동으로 조정되고 균형의 모든 열 높이가 가장 높은 열 높이로 설정됩니다.

column-gap: 열 사이의 간격을 지정합니다. 기본값은 1em과 같습니다. 컬럼 간격과 컬럼 너비의 합이 전체 너비보다 큰 경우, 컬럼 개수에 지정된 컬럼 수를 표시할 수 없으며 컬럼 수와 너비는 브라우저에 의해 자동으로 조정됩니다. .

column-rule: 모든 컬럼 규칙-* 속성의 약어 속성을 설정합니다. 테두리와 유사하지만 공백을 차지하지 않는다는 차이점이 있으므로 컬럼 규칙을 설정해도 열 너비가 변경되지 않습니다. 또한 테두리 너비가 열 간격 열 간격보다 크면 테두리가 표시되지 않습니다.

column-span: 요소가 확장되어야 하는 열 수를 지정합니다. 기본값인 none은 열을 확장하지 않음을 의미하고 all은 모든 열을 확장함을 의미합니다. 예를 들어 기사 제목을 all로 설정하여 열을 확장할 수 있습니다.

column-width: 열의 너비를 지정하고 열의 최소 너비를 정의합니다. 기본값은 auto입니다. 즉, 열 개수 열 수에 따라 열 너비가 자동으로 조정됩니다.

위 속성 중 가장 일반적으로 사용되는 속성은 열 너비와 열 개수입니다. 이 두 속성의 약어는 다음과 같습니다. 예:

#col {
-moz-columns: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
}

로그인 후 복사

위 코드에서 선언한 의미는 열의 너비입니다. 8em이지만 총 열 수는 12를 초과하지 않습니다.

css3 다중 열 레이아웃의 전체 구현 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多列布局</title>
    <style>
        .div {
            column-count: 3;
            column-gap: 90px;
            column-rule: 1px dashed green;
            column-width: 370px;
        }
        .div h1 {
            text-align: center;
            -webkit-column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h1>我的爱好</h1>
        <h3>第一段内容</h3>
        <p>每个人都生活在成长当中，在成长当中也会有更多的梦想，更多的坚持！慢慢凝结成成长的深海。我=画画</p>
        <h3>第二段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第三段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第四段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第五段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
    </div>
</body>
</html>

로그인 후 복사

css3 다중 열 레이아웃 효과는 다음과 같습니다.