旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css column-fill属性怎样用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:91


导读:csscolumn-gap属性定义及用法在css中,column-gap属性一般和columns、column-count等排列属性一同运用,用来设置元素内容排列(多...

css column-gap属性定义及用法

在css中,column-gap属性一般和columns、column-count等排列属性一同运用,用来设置元素内容排列(多列规划)后列与列之间的间隔

css column-gap属性语法花样

css语法:column-gap: length / normal;(例:column-gap:36px;)

JavaScript语法:object.style.columnGap="40px"

css column-gap属性值申明

length:自定义列之间的间距

normal:列之间的一般差异

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css3 column-gap属性设置列之间的间隔笔记</title>

<style type="text/css">

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

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

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

</style>

</head>

<body>

<div class="gap">column-gap:60px;演示,将列与列之间的间隔设置为60px</div>

<div class="gap_normal">column-gap:normal;演示,将列与列之间的间隔设置一般间隔!</div>

</body>

</html>

运转效果

以上就是css column-fill属性怎样用的细致内容,更多请关注ki4网别的相干文章!

标签:css column-fill属性