多列布局屬性

2021-10-03 19:06:01 字數 751 閱讀 2098

多列布局

多列布局類似報紙或雜誌中的排版方式,主要用以控制大篇幅文字。

1、column-count  : 分隔列數

說明:屬性規定元素應該被分隔的列數

用於:除table外的非替換塊級元素, table cells, inline-block元素

2、column-gap : 設定列與列之間的間隔大小;

3、column-rule : 新增列與列之間的邊框

設定或檢索物件的列與列之間的邊框。復合屬性。

column-rule-color規定列之間規則的顏色。

column-rule-style規定列之間規則的樣式。

column-rule-width規定列之間規則的寬度。

4、column-fill : 設定列與列之間的高度是否統一

設定或檢索物件所有列的高度是否統一

auto:列高度自適應內容

balance:所有列的高度以其中最高的一列統一 (預設值)

5、column-span : 跨列或者不誇列

設定或檢索物件元素是否橫跨所有列。

none:不跨列

all:橫跨所有列

6、column-width : 設定或檢索物件每列的寬度

說明:當column-width 和column-count 同時存在的時候;

column-width :最小寬度

column-count :最多列數

columns屬性 多列布局

columns k l m 多列布局 與之相關的屬性或子屬性如下所示 一 columns 整合column width和column count兩個屬性 二 column width 定義每列列寬度 屬性值如下所示 1 auto 預設值,自適應 2 長度值 設定列寬。此處的列寬在功能上相當於最小寬度...

CSS布局屬性

一 css布局屬性 width 設定物件的寬度 width 45px height 設定物件的高度 height 45px background 設定物件的背景顏色 背景影象。1.背景顏色 background 09f 2.背景影象 repeat x代表橫向重複,還可以設定repeat y。floa...

ConstraintLayout 布局屬性詳解

表示此控制項的左邊框與某個控制項的左邊框對齊或者在其右邊 表示此控制項的左邊框與某個控制項的右邊框對齊或者在其右邊 表示此控制項的右邊框與某個控制項的左邊框對齊或在其左邊 表示此控制項的右邊框與某個控制項的右邊框對齊或在其左邊 表示此控制項的頂部邊框與某個控制項的頂部邊框水平對齊或在其下邊 表示此控...