다중 열 레이아웃의 개념은 무엇입니까? CSS 다중 열 레이아웃 적용(예제 코드)

이 글에서는 다중 열 레이아웃의 개념이 무엇인지 소개합니다. CSS 다중 열 레이아웃(예제 코드) 적용에는 특정 참고 가치가 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

다열 레이아웃

CSS3에서는 다음 예와 같이 텍스트 콘텐츠를 신문과 같은 다열 레이아웃으로 디자인할 수 있습니다.

코드는 다음과 같습니다(구체적인 설명은 코드에서)
브라우저 지원
테이블 안의 숫자는 이 방법을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

숫자 바로 뒤에 오는 -webkit- 또는 -moz-는 지정된 브라우저의 접두사입니다.

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document李波</title>
    <style>
        .p {
            /*控制列数*/
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;

            /*控制列和列之间的宽*/
            -moz-column-gap: 90px;
            /* Firefox */
            -webkit-column-gap: 90px;
            /* Safari and Chrome */
            column-gap: 90px;

            /*控制列和列之间的线*/
            -webkit-column-rule-style: dashed;
            /* Chrome, Safari, Opera */
            -moz-column-rule-style: dashed;
            /* Firefox */
            column-rule-style: dashed;

            /*控制列和列之间线的宽度*/
            -webkit-column-rule-width: 1px;
            /* Chrome, Safari, Opera */
            -moz-column-rule-width: 1px;
            /* Firefox */
            column-rule-width: 1px;

            /*控制列和列之间线的颜色*/
            -webkit-column-rule-color: green;
            /* Chrome, Safari, Opera */
            -moz-column-rule-color: green;
            /* Firefox */
            column-rule-color: green;

            /*以上的列和列之间线的宽度、颜色、以及性质都可缩写为“column-rule”*/
            -webkit-column-rule: 1px dashed green;
            /* Chrome, Safari, Opera */
            -moz-column-rule: 1px dashed green;
            /* Firefox */
            column-rule: 1px dashed green;

            /*若没有设置列数，就会根据列宽走*/
            -webkit-column-width: 190px;
            /* Chrome, Safari, Opera */
            column-width: 370px;

        }



        .p h1 {
            text-align: center;
            -webkit-column-span: all;
        }
    </style>



    <p>

        </p><h1 id="我的爱好">我的爱好</h1>
        <h3 id="第一段内容">第一段内容</h3>
        <p>
            <b>注意:</b>( Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。）</p>
        <p>每个人都生活在成长当中，在成长当中也会有更多的梦想，更多的坚持！慢慢凝结成成长的深海。

                我=画画</p>
        <h3 id="第二段内容">第二段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3 id="第三段内容">第三段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3 id="第四段内容">第四段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3 id="第五段内容">第五段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

    

추천 관련 기사:

CSS 이미지 스크롤 코드를 작성하는 방법은 무엇입니까? 캐러셀 차트의 가로 스크롤 표시

css3의 새로운 속성: CSS3 다중 열 레이아웃 속성 요약(예제 포함)

위 내용은 다중 열 레이아웃의 개념은 무엇입니까? CSS 다중 열 레이아웃 적용(예제 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!