多列布局（column）

時間 2019-12-05

標籤多列佈局 column 简体版

原文原文鏈接

容器的屬性

column-width: auto | < length > 。給列定義一個最小寬度（min-width）。

auto: 列寬由其餘元素決定。
length: 顯式設置最小寬度。

column-count: auto | < integer >定義列的數量。

auto: 元素只有一列。就像沒有設置同樣。
< integer >: 正整數值。取值是大於0的整數，負值無效。

columns: < column-width > || < column-count >。是column-width和column-count的簡寫。次序隨意。

　　列寬 = （父元素寬度 - （列數-1）列間隙） / 列數*
　　好比：父元素40em，分爲4列，列間隙爲2em。那麼列寬爲（ 40 - （4-1） * 2） / 4 = 8.5em。
　　若是顯式設置的列寬小於這個寬度，它會以這個寬度展現。
　　若是顯式設置的列寬大於這個寬度，它會按照合適的尺寸從新排列列寬和列數。當前設置的列寬和列數並不許確。css

column-gap: normal | < length >。定義列間距。值過大時會撐破布局。

normal: 默認值，由瀏覽器解析，通常是lem。
< length >: 有浮點數字和單位標識符組成的長度值。如：2.1em。html

column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >。定義列邊框。

　　它的中心線始終和列間距的中心線同樣。換言之，它總處於兩列的中間。和border相似。若是列邊框大於列間距，並不會自動消失。列邊框超出列間距的部分就像是沉在文字的下方同樣（背景效果）。web

column-fill: auto | balance。定義多列中每一列的高度是否統一。

　　這個屬性很奇怪。而且在瀏覽器中不統一。它有兩個值：auto | balance。在 ie10/ie11/opera40/chrome52中測試的結果都是同樣的，發現這兩個屬性並無區別。在firefox49中測試，這兩個屬性是有區別的，其中balance是每列高度差很少（對齊），auto就自動合併成一列了，不管本身設置的是多少列。chrome

項目（元素）屬性

column-span: none | all。定義一個元素橫跨多少列。

　　若是咱們常將標題橫跨全部列。那麼，column-span: all。其默認值是，column-span: none；表示不跨列。瀏覽器

代碼：

<!DOCTYPE html>
    <html lang="en">
    <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>多列布局｜column-span</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <h1>金融時報：微軟可否拯救Windows 8？</h1>
        <p>網易科技訊 5月8日消息，據國外媒體報道，Windows 8上市以來遭到業界與用戶的各類詬病，銷售量也不樂觀。雖然微軟已經意識到問題的嚴重性，可是鮑爾默可否力挽狂瀾，還不得而知。今天金融時報撰文分析Windows 8與微軟所遇到的困境，並展望了他們的將來，如下是文章主要內容：</p>
        <h3>微軟可否拯救Windows 8？</h3>
        <p>這個問題關乎世界上最大的軟件公司的將來以及其首席執行官史蒂夫·鮑爾默（Steve Ballmer）的職業生涯。微軟爲了保持其在PC領域的領先地位而推出的操做系統並無獲得用戶的承認。</p>
        <p>不過，看起來微軟已經意識到問題的嚴重性。一個標誌性動做就是，本週早些時候，微軟宣佈在今年年末以前發佈Windows8的更新版本，代號爲「Blue」。這是微軟第一次打破了按年發佈的傳統，增長軟件版本發佈的頻率，但跟競爭對手蘋果和谷歌的軟件更新發布頻率還有不小差距。不過無論怎樣這都說明微軟已經開始採起行動，應對更激烈的競爭。</p>
        <p>設計融合PC和平板電腦的Win8已經遭到了業界各類嚴厲的批評。紐約高科技研究公司Envisioneering的分析師Richard Doherty表示，「坐在Win8前面會讓人感受這操做系統蠢斃了，早期使用反饋研究代表人們普遍表示對win8不滿。」Win8結合了傳統PC界面和平板觸摸屏界面的設計理念也遭人詬病，一些評論認爲微軟過於雄心勃勃，以致於在兩款平臺上都沒有作好。</p>
        <p>不過微軟如今已經準備認可該軟件確實給PC用戶帶來了不便：PC用戶面對Win8時，須要經歷一個十分陡峭的「學習曲線」。同時，微軟也在作出改變，旨在提升Win8的可用性。雖然沒有確鑿證據，但微軟受到了來自PC用戶不小的壓力。PC用戶的但願是，當他們打開本身的PC時，是熟悉的Windows桌面，而不是被強制使用「豐富多彩」的微軟瓷磚。同時，PC用戶也一直但願微軟把「開始」按鈕弄回來。長期以來這一直是PC用戶最熟悉的導航工具。</p>
        <p>這些反饋代表，不少用戶尚未準備好使用Windows的觸摸屏操做系統，而是繼續把Windows看成PC時代的產品。微軟本週也認可Win8的成功將不只僅須要用戶界面的變化。Win8的另外一個問題是價格。不過微軟目前正在推進硬件廠商生產尺寸更小，成本更低的平板。這樣的話，Win8平板的價格可能迅速降低到400美圓左右，並向300美圓看齊。</p>
        <p>不過值得微軟慶幸的是至少目前Win8沒有遇到Vista的軟件質量問題。許多企業用戶由於Vista的各類弊病，直接跳過該版本，直接從早期的XP升級到Windows 7。約三分之二的企業用戶目前已經升級到Windows 7。不過他們目前又開始了另外一次觀望，已決定是否要作新的升級。若是企業用戶決定跳過Win8，那麼微軟將錯過追趕蘋果和谷歌的重要機會。</p>
    </div>
</body>
</html>

效果圖：

持續更新，感謝你們支持。

相關標籤/搜索

每日一句

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