成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

多列總結(jié)

未東興 / 1832人閱讀

摘要：多列適用于除外的非替換塊級(jí)元素，，元素語(yǔ)法列寬列數(shù)如果元素設(shè)置了多列，同時(shí)也設(shè)置了寬度，當(dāng)元素寬度小于時(shí)，元素會(huì)減少列的個(gè)數(shù)，以適應(yīng)元素寬度行數(shù)設(shè)置的是單位了適應(yīng)元素寬度變?yōu)榱嗽O(shè)置或檢索列與列之間的間隙。

多列 columns

適用于除table外的非替換塊級(jí)元素，table cells，inline-block元素

語(yǔ)法：

columns: <"column-width"> <"column-count">;  
/* column-width 列寬   column-count 列數(shù) */

如果元素設(shè)置了多列，同時(shí)也設(shè)置了寬度，當(dāng)元素寬度小于columnWidth * columnCount + columnGap時(shí)，元素會(huì)減少列的個(gè)數(shù)，以適應(yīng)元素寬度

.test {
    columns:210px 3;
    width: 500px;
}
/* 500 < 210*3 ,行數(shù)設(shè)置的是 3 單位了適應(yīng)元素寬度變?yōu)榱? */
column-gap

設(shè)置或檢索列與列之間的間隙。不允許負(fù)值。

.test{
    columns:210px 3;
    column-gap: 30px;
}

效果如下：

column-rule

設(shè)置或檢索對(duì)象的列與列之間的邊框。

語(yǔ)法：

column-rule：<" column-rule-width "> || <" column-rule-style "> || <" column-rule-color ">
/* 與border類似  */

邊框在列間隙的中間，如果邊框?qū)挾却笥陂g隙寬度，那么邊框會(huì)覆蓋內(nèi)容。

.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
}

效果如下：

column-span

設(shè)置或檢索對(duì)象元素是否橫跨所有列

取值：

column-span: all;  /* 橫跨所有列 */
column-span: none;  /* 不橫跨 */
.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
    column-span: all;
    -moz-column-gap: 20px;
    -moz-column-rule: 30px solid green;
    -moz-column-span: all;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 30px solid green;
    -webkit-column-span: all;
}

.test div{
    background-color: yellow;
}

效果如下：

column-fill

設(shè)置或檢索所有列的高度是否統(tǒng)一

取值：

column-span: auto;  /* 列高度自適應(yīng)內(nèi)容 */
column-span: balance;  /* 所有列的高度以其中最高的一列統(tǒng)一  */
column-break-before

設(shè)置或檢索對(duì)象之前是否斷行

取值：

column-break-before: auto; /*既不強(qiáng)迫也不禁止在元素之前斷行并產(chǎn)生新列*/ 
column-break-before: always; /*總是在元素之前斷行并產(chǎn)生新列*/
column-break-before: avoid; /*避免在元素之前斷行并產(chǎn)生新列 */
.test{
    -moz-column-count:4;
    -moz-column-gap:20px;
    -moz-column-rule:3px solid #090;
    -webkit-column-count:4;
    -webkit-column-gap:20px;
    -webkit-column-rule:3px solid #090;
    column-count:4;
    column-gap:20px;
    column-rule:3px solid #090;
}

.test div{
    -moz-column-break-before:always;
    -webkit-column-break-before:always;
    column-break-before:always;
}

效果如下：

column-break-after

設(shè)置或檢索對(duì)象之后是否斷行

取值：

column-break-after: auto; /*既不強(qiáng)迫也不禁止在元素之后斷行并產(chǎn)生新列 */ 
column-break-after: always; /*總是在元素之后斷行并產(chǎn)生新列*/
column-break-after: avoid; /*避免在元素之后斷行并產(chǎn)生新列*/

與 column-break-before 同理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111768.html

相關(guān)文章

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    lijinke666 評(píng)論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    hedge_hog 評(píng)論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    kun_jian 評(píng)論0 收藏0

  • 水平居中、垂直居中、水平垂直居中、浮動(dòng)居中、絕對(duì)定位居中.......幫你搞定

    摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素絕對(duì)定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個(gè)元素？你會(huì)想到啥？這里面的知識(shí)還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素、絕對(duì)定位的居中。為了代碼簡(jiǎn)介，沒(méi)有加背景和其他樣式，需要看效果的，可以加上背景。 目錄： 第一...

    waterc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<