CSS-多列布局1-概述

java小工匠發表於2017-08-18
CSS

1、多列布局概述

通過 CSS3，您能夠建立多個列來對文字進行佈局 – 就像報紙那樣！

2、常用屬性

屬性 版本 描述
columns CSS3 設定或檢索物件的列數和每列的寬度。複合屬性
column-width CSS3 設定或檢索物件每列的寬度
column-count CSS3 設定或檢索物件的列數
column-gap CSS3 設定或檢索物件的列與列之間的間隙
column-rule CSS3 設定或檢索物件的列與列之間的邊框。複合屬性
column-rule-width CSS3 設定或檢索物件的列與列之間的邊框厚度。
column-rule-style CSS3 設定或檢索物件的列與列之間的邊框樣式。
column-rule-color CSS3 設定或檢索物件的列與列之間的邊框顏色。
column-span CSS3 設定或檢索物件元素是否橫跨所有列。
column-fill CSS3 設定或檢索物件所有列的高度是否統一。
column-break-before CSS3 設定或檢索物件之前是否斷行。
column-break-after CSS3 設定或檢索物件之前是否斷行。
column-break-inside CSS3 設定或檢索物件內部是否斷行。

3、常用屬性說明

3.1 顯示多少列.

（1）如果不設定 column-count 時

顯示列數 = （總寬度+列間距）/ (列寬度+列間距)

（2）如果不設定 column-count 時

條件 顯示列數
(列寬度+列間距)*列數 -列間距 <= 盒子寬度 顯示列數量
(列寬度+列間距)*列數 -列間距 <= 盒子寬度 (總寬度+列間距）/ (列寬度+列間距)

3.2 例項效果

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS多列布局</title>
    <style type="text/css">
        p{
            width: 800px;
            margin: 5px;
            border: 1px solid gray;
        }
        .div1{
            column-width: 200px;
            column-count: 3;
            column-gap: 100px;
            column-rule: 150px solid red;
            width: 800px;
            border: 1px solid red;
            margin: 5px;
        }
        .div2{
            column-width: 200px;
            column-count: 3;
            column-gap: 100px;
            column-rule: 150px solid red;
            width: 799px;
            border: 1px solid red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>
    column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 800px;<br>  column-rule: 150px solid red;<br>
    </p>
    <p style="color: red">
      (column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
      <=800px<br>
      因此顯示列數 = 設定列數;
      <br/>
      column-rule-width的值，不影響列數顯示。
    </p>
    <div class="div1">CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀佈局模式的有力擴充。這種新語法能夠讓WEB開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，讓文字按多列呈現，就像報紙上的新聞排版一樣。
    </div>
     <p>
    column-width:200px;<br>column-gap: 100px;<br>column-count: 3;<br>width: 799px;<br>  column-rule: 150px solid red;<br>
    </p>
    <p style="color: red">
      (column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
      >799px<br>
      因此顯示列數 = (799+100)/(200+100)=2;
       <br/>
      column-rule-width的值，不影響列數顯示。
    </p>
    <div class="div2">CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀佈局模式的有力擴充。這種新語法能夠讓WEB開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，
</body>
</html>

執行效果：

image.png


相關文章