分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

CSS 3列(等高文本列)

发布时间:2023-09-06 01:20责任编辑:蔡小小关键词:CSS

css 3可以创建等高文本列,通过column-count、column-width、column-gap属性实现。假设标记如下:

<h1>Socrates</h1> ???<div class="col"> ???<p>After philosophizing for a while......</p></div>

下面的规则创建一个三列布局,每列的宽度为14em,列之间有2em的间距。CSS列的优点之一是在可用的空间小于已定义列的宽度时的处理方式,列不会像使用浮动时那样回绕,而是会减少列数,因此,如果空间不够显示三列,就会减少到两列。

.col { ???-moz-column-count: 3; ???-moz-column-width: 14em; ???-moz-column-gap: 2em; ???-moz-column-rule: 1px solid #ccc; ???-webkit-column-count: 3; ???-webkit-column-width: 14em; ???-webkit-column-gap: 2em; ???-webkit-column-rule: 1px solid #ccc;}

可以发现浏览器对CSS列的支持还不广泛,因此,除了常规代码,还需要使用特定于浏览器相关的扩展。

CSS 3列(等高文本列)

原文地址:http://www.cnblogs.com/lmjZone/p/7738612.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved