css中column-fill屬性有什么用

發(fā)布時(shí)間：2022-02-25 11:46:56 來源：億速云閱讀：111 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中column-fill屬性有什么用，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　csscolumn-gap屬性定義及用法

　　在css中，column-gap屬性通常和columns、column-count等分列屬性一起使用，用來設(shè)置元素內(nèi)容分列（多列布局）后列與列之間的距離

　　csscolumn-gap屬性語法格式

　　css語法：column-gap:length/normal;（例：column-gap:36px;）

　　JavaScript語法：object.style.columnGap="40px"

　　csscolumn-gap屬性值說明

　　length：自定義列之間的間距

　　normal：列之間的普通差距

　　實(shí)例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<title>css3column-gap屬性設(shè)置列之間的距離筆記</title>

　　<styletype="text/css">

　　body{background:#ddd;}div{width:400px;border:1pxsolidblueviolet;}

　　.gap{column-count:3;column-gap:60px;}

　　.gap_normal{column-count:3;column-gap:normal;}

　　</style>

　　</head>

　　<body>

　　<divclass="gap">column-gap:60px;演示，將列與列之間的距離設(shè)置為60px</div>

　　<divclass="gap_normal">column-gap:normal;演示，將列與列之間的距離設(shè)置普通距離！</div>

　　</body>

　　</html>

關(guān)于“css中column-fill屬性有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡