多列布局

時間 2019-12-22

標籤多列佈局简体版

原文原文鏈接

columns

columns 縮寫屬性設置列寬和列數
- column-count 指定元素應該分爲的列數
- column-width 指定列的寬度

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            div{
                border:2px solid #000; 
                min-height: 300px;
                columns: 200px 3; 
            }
        </style>
    </head>
    <body>
        <div>文本文本文本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本</div>
    </body>
</html>

注意若是把文本換成沒有意義的英文字符，要加這個樣式word-break: break-all;css

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            div{
                border:2px solid #000; 
                min-height: 300px;
                columns: 200px 3; 
            }
        </style>
    </head>
    <body>
        <div style="word-break: break-all;">
        ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        </div>
    </body>
</html>

column-rule

對於設置全部column-rule-*屬性的簡寫屬性html

column-rule-color 指定列之間的顏色規則
column-rule-style 指定列之間的樣式規則
column-rule-width 指定列之間的寬度規則，分割線的寬度

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            div{
                border:2px solid #000; 
                columns: 200px 3; 
                min-height: 300px;
                /*加上這段代碼*/
                column-rule: 2px double skyblue;
            }
        </style>
    </head>
    <body>
        <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
        </div>
    </body>
</html>

column-span

多列布局中某些元素，是否跨列瀏覽器

1 只能跨一列
all 能夠跨列所有

是的，要麼只能跨一列，要麼能跨所有。dom

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            section{
                border:2px solid #000; 
                columns: 200px 3; 
                min-height: 300px;
                column-rule: 2px double skyblue;
            }
            h2{
                /*加上這段代碼*/
                column-span: all;
            }
        </style>
    </head>
    <body>
        <section>
            <h2>標題標題標題標題標題標題標題標題標題——跨列的標題</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
        </section>
    </body>
</html>

column-gap

列之間的距離佈局

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            section{
                border:2px solid #000; 
                columns: 200px 3; 
                min-height: 300px;
                column-rule: 2px double skyblue;
                /*加上這段代碼*/
                column-gap: 60px;
            }
            h2{
                column-span: all;
            }
        </style>
    </head>
    <body>
        <section>
            <h2>標題標題標題標題標題標題標題標題標題——跨列的標題</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
        </section>
    </body>
</html>

注意：多列布局在PC端，隨着瀏覽器縮小，會將列數減少，直到一列。寬度減少了，高度會增長，若是給一個固定高度，那麼超出盒子範圍的內容會被隱藏，並且沒有滾動條，因此不要固定高度，給個最小高度。ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。