hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26HTML搜搜PHP网50°c
A+ A-

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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
css column-fill属性怎样用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章