[HTML/CSS]colum-gap属性
属性定义及使用说明
column-gap的属性指定的列之间的差距。
注意: 如果指定了列之间的距离规则,它会取平均值。
语法
值 | 描述 |
---|---|
length | 一个指定的长度,将设置列之间的差距 |
normal | 指定一个列之间的普通差距。 W3C建议1EM值 |
Flex layout(存在兼容性问题)
HTML
1 <div id="flexbox"> 2 <div></div> 3 <div></div> 4 <div></div> 5 </div>
CSS
#flexbox {display: flex;height: 100px;column-gap: 20px; } #flexbox > div {border: 1px solid green;background-color: lime;flex: auto; }
Result
Grid layout(存在兼容性问题)
HTML
1 <div id="grid"> 2 <div></div> 3 <div></div> 4 <div></div> 5 </div>
CSS
1 #grid { 2 display: grid; 3 height: 100px; 4 grid-template-columns: repeat(3, 1fr); 5 grid-template-rows: 100px; 6 column-gap: 20px; 7 } 8 9 #grid > div { 10 border: 1px solid green; 11 background-color: lime; 12 }
Result
Multi-column layout
HTML
1 <p class="content-box">女流直播和解说的游戏不同于国内常见的流行游戏,以优秀的独立游戏和极具艺术性富含哲理的顶尖大作为主。独立游戏的走向相对地取决于开发者,他们可以做自己想做的游戏而不受限制,所以这类游戏往往带有作者的态度和表达。这类游戏不同于声势浩大的大型游戏,却总能给人带来出乎意料的惊喜。</p>
CSS
1 .content-box { 2 column-count: 3; 3 column-gap: 40px; 4 }
Result
转载于:https://www.cnblogs.com/SoYang/p/10322292.html
[HTML/CSS]colum-gap属性相关推荐
- css calc 计算属性值
css calc 计算属性值 definition The calc() CSS function lets you perform calculations when specifying CSS ...
- 巧用CSS的Border属性
. 作者:冯永曜 来源:黄山村夫 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
- CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
- CSS中连接属性的排序
在CSS超链接的属性中,有四个连接方式: a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有 ...
- html图片加波浪滤镜,CSS滤镜wave属性(波形滤镜)
[实例介绍] CSS滤镜wave属性(波形滤镜) wave滤镜用来把对象按照垂直的波纹样式打乱.waVe的表达式还是比较复杂的,它一共有5个参数. [基本语法] filter:wave(add=参数值 ...
- CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局 下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例 设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
- CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- css中position属性(absolute/relative/static/fixed)
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
- html笔记(一)html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
最新文章
- SQL2000联机丛书:使用和维护数据仓库
- 计算机视觉顶会上的灌水文都有哪些特征?
- Python学习之路-装饰器生成器正则表达式
- 数据结构趣题——顺序表就地逆置
- Fiori extension hook和Hybris的template
- Android 隐式意图的配置
- c语言打印字符的函数参数,C语言格式化打印函数vsnprintf()的实现
- 数据库管理软件的由来
- Docker 概念-1
- 百亿美元合同告吹!微软“到嘴的鸭子”飞了
- 对应点集配准的四元数法(ICP算法中的一个关键步骤)
- css中如何将a标签设置居中,cssa标签设置成block后,怎么让文字垂直居中_html/css_WEB-ITnose...
- 安卓psp模拟器联机教程_让PSP带你回童年FC模拟器联机教程.doc
- 第六章-博弈论之Stackelberg博弈
- ”微服务一条龙“最佳指南-工具篇:初步使用Pipenv
- html复制粘贴的文字自动换行,如何解决Word中粘贴网页上的文字自动换行的现象...
- idea 编译通过,无法调试 Frames are not available
- 三星S7 Edge怎么打开usb调试呢
- 思科光交MDS9710绑定WWN并激活新的wwn
- 难处理的js单引号与双引号问题解决
热门文章
- ios动态效果实现翻页_动画:UIKitAnimation 简单动画学习 iOS (一) 渐变 、 移动 、翻页、来回翻转 | 学步园...
- mabatisplus怎么给实体类自定义属性_如果你的角色属性可以自定义,你会怎么点?...
- java 实现部门树_(java实现)哈夫曼(Huffman)树编码(自编压缩项目基础)
- 微软程序在Android上跑,想在Win 10上运行Android应用?这类手机用户已经可以尝鲜...
- 【吐血整理】java正则表达式详解
- Python编程之计算生态
- java聊天程序_急需一个用java 语言写的聊天程序
- r - 求平均成绩_学霸秘籍:小学数学知识点例题讲解 — 平均数问题
- python语言解释器的全部代码都是开源的_Python IDE和解释器的区别是什么?
- 细节无处不在!东莞网络推广分享哪些操作会影响网站优化效果?