H5多列布局

時間 2019-12-05

標籤 h5 多列佈局简体版

原文原文鏈接

多列布局

基本概念

一、多列布局相似報紙或雜誌中的排版方式，上要用以控制大篇幅文本。

二、跨列屬性能夠控制橫跨列的數量

/*列數*/
-webkit-column-count: 3;
/*分割線*/
-webkit-column-rule: dashed red;
/*列間距*/
-webkit-column-gap: 20px;
/*列寬度*/
-webkit-column-width: 300px;

/*跨列*/
-webkit-column-span: all;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 1200px;
            padding: 30px;
            margin: 0 auto;
            /*列數*/
            -webkit-column-count: 3;
            /*分割線*/
            -webkit-column-rule: dashed red;
            /*列間距*/
            -webkit-column-gap: 20px;
            /*列寬度*/
            -webkit-column-width: 300px;
        }

        h4 {
            /*跨列*/
            -webkit-column-span: all;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <h4>思考世界</h4>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
    <p>CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。
        只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：
        盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。</p>
</div>
</body>
</html>

運行效果以下：
html

小結：

因爲不一樣瀏覽器支持程度不同，因此有必要加上兼容寫法web

column-*:
-o-column-*:
-ms-column-*:
-moz-column-*:
-webkit-column-*:

相關標籤/搜索

每日一句

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