您现在的位置是：网站首页> 编程资料编程资料

CSS3 Columns分列式布局方法简介CSS columns实现两端对齐布局的示例代码浅谈CSS 多栏布局（Multi-Columns Layout）

2021-09-06 923人已围观

简介 CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局

幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：

1.column-count: 列数目
2.column-gap: 各列之间间隙宽度
3.column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
4.column-rule-width：列之间分割线宽度
5.column-rule-style：列之间分割线风格
6.column-rule-color：列之间分割线演示
7.column-span: 允许一个元素的宽度跨越多列
8.column-fill: 分列方式

要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：

复制代码
代码如下:

/* 3 列，每列之间10px间距 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
}

如果你想美化一下列之间的空隙，这也很简单：

复制代码
代码如下:

/* 3 列，每列之间10px间距 ，带有金色的隔离线 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;
}

指定的元素还可以横跨多列：

复制代码
代码如下:

/* 以下面的HTML为例:


表头!


列 1

列 2

列 3

列 4

列 5

列 6

列 7

列 8

列 9

列 10

列 11

列 12

*/
div.col-3 {
column-count: 3;
column-gap: 5px;
}

div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;
}


非常的简单，而且显示结果完全符合我们的预期！

使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。

上一篇：css实现字符串截断并加省略号示例兼容IE和FF的单行溢出文本显示省略号-CSS教程-网页制作-网页教学网字符串过长CSS截取多余文字并用省略号显示通过纯CSS样式实现DIV元素中多行文本超长自动省略号css样式显示省略号自定义宽度超过隐藏显示省略标记CSS省略号text-overflow超出溢出显示省略号CSS 控制字符宽度省略号效果 兼容浏览器CSS文本超出div或者span时用省略号代替

下一篇：用条件注释判断浏览器版本解决页面兼容问题浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网