国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

多列總結(jié)

未東興 / 1835人閱讀

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

多列 columns

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

語法：

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

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

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

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

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

效果如下：

column-rule

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

語法：

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

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

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

效果如下：

column-span

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

取值：

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è)置或檢索對象之前是否斷行

取值：

column-break-before: auto; /*既不強迫也不禁止在元素之前斷行并產(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è)置或檢索對象之后是否斷行

取值：

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

與 column-break-before 同理

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111768.html

相關(guān)文章

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

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

    lijinke666 評論0 收藏0

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

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

    hedge_hog 評論0 收藏0

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

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

    kun_jian 評論0 收藏0

  • 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

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

    waterc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<