HTML常使用的布局方法——多列布局

作者: LiLi原上草 | 来源:发表于2017-06-02 21:22 被阅读80次

CSS3中提供的新属性columns,是用于多列布局的。

在这之前,有些大家习以为常的排版,要用CSS动态实现其实是比较困难的。如下方的排版,类似于报纸排版:

在不知columns属性之前,这种效果想想确实很难实现,因为内容是动态的。搞div容易,但每个div内放多少文字呢?一篇文章该在哪行哪段剪切进不同的div内呢?你肯定不愿意为每一段文字,都在特定的地方插入div标签,简直要疯了。而使用columns它可以让浏览器确定何处结束一列和开始下一列,简单的说,就是CSS3多列布局可以自动将内容按指定的列数排列。多列布局的主要属性有:

column-width: 类似于给列定义一个最小宽度

column-count: 指定想要的列数或者说是最大列数

column-gap: 定义列间距,相当于margin属性

column-rule: 定义列边框,相当于border,不过它不占任何空间

column-span: 定义多列布局中子元素的跨列效果

column-fill: 控制每列的列高应该是一样的还是自适应的,浏览器支持情况较差。不建议使用


属性的详细介绍:

column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。

column-count最大列数,不赘述。

通常上面两个参数都合并在columns中一起指定。

column-gap是列间距,默认值normal,相当于1em。需要注意的是,如果column-gap与column-width加起来大于总宽度的话,就无法显示column-count指定的列数,会被浏览器自动调整列数和列宽

column-rule用于设置列的边框,类似于border,区别是不占用任何空间,因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距,将不会显示边框。语法和border类似,例如column-rule: 1px solid #000;。效果见例子页面

column-span用于跨列,默认值none表示不跨列,all表示跨越所有列。例如文章标题可以设成all来跨列。效果见例子页面

column-fill用于统一列高。默认值auto各列的高度随内容自动调整,balance所有列高都设为最高的列高;

下面上一段代码,实现的效果如下:

HTML架构如下

scc的设置如下:

多列布局先介绍到这里,如果对您有所帮助的话,请点赞并关注哦,我会不定时的更新一下自己学习的经验以及见解,和大家进行交流。

您赞就是是我最大的动力!!!

相关文章

  • HTML常使用的布局方法——多列布局

    CSS3中提供的新属性columns,是用于多列布局的。 在这之前,有些大家习以为常的排版,要用CSS动态实现其实...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • HTML4.01+CSS2.0教程(六)

    2/27/2017 12:45:49 PM 使用HTML5的网站布局(多列布局) 定义文档或节的页眉 定义导航链接...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • day05-css3-flex

    多列布局CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语...

  • HTML布局

    网站常常以多列显示内容(就像杂志和报纸)。 使用

    元素的HTML布局 注释: 元素常用作布局工具,因为能够...

  • HTML常使用的布局方法——响应式布局

    什么是响应式布局? 随着css3的诞生,css3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围...

  • 小程序4——UI布局问题(持续更新)

    1、关于display:flex 多栏多列布局 小程序中推荐使用display:flex多栏布局,来简化页面布局 ...

  • 前端面试每日 3+1 —— 第354天

    今天的知识点 (2020.04.04) —— 第354天 (我也要出题) [html] 列举几种多列等高布局的方法...

  • CSS3多列布局

    定义列数column-count 在CSS3的多列布局中,我们可以使用column-count属性指定多列布局的列...

网友评论

    本文标题:HTML常使用的布局方法——多列布局

    本文链接:https://www.haomeiwen.com/subject/yfaufxtx.html