css实现多列布局的实践

今天给大家安利的是一个多列布局的实践 :Columns ,特别简单,用到的属性是 column-count,column-width,column-gap 为什么会用到 Columns 场景是因为只想在手机上显示两栏,每一个.item都是从后台动态获取 然后遍历出来 渲染到页面

布局如图:

css实现多列布局的实践

概念解释:

column-width:[<length> | auto]  中括号里边<length>长度单位; auto是默认值 由浏览器决定列宽;

column-count:auto | 整数  auto由其他属性决定列数,比如 "column-width";

column-gap:normal | <length> normal 为默认值,默值为1em(如果你的字号是px伫值,其默认值为你的font-size值);length 设置列与列之间的距离。

理解完概念之后上代码:

HTML:

 

 

占位图 1

 

占位图 2

 

占位图 3

 

占位图 4

 

占位图 5

 

占位图 6

 

 

 

CSS:

*{
        margin:0;
    }
    .wrapper{
        padding:10px;
    }
    .inner_wrapper{
        column-count: 2;
        column-width:100px;
        column-gap: 10px;
    }
    .item{
        position: relative;
    }
    .count{
        position: absolute;
        bottom: 4px;
        text-align: center;
        background:rgba(47, 37, 37, 0.5);
        display: inline-block;
        width: 100%;
        color: #fff;
    }
    img{
        width: 100%
    }

运行完就会得到上图的结果,设置 column-count: 2;  column-width:100px;  column-gap: 10px; 是核心点,需要注意的一点是:column-count的值大于2时 inner_wrapper的宽度 column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了,没关系,看个动图: 为了方便讲解我本地设置column-count: 3时的效果,右上角340px是一个边界,小于340px时会变两列;

css实现多列布局的实践

因为当 column-count: 2 设置为2 时。变成单列时有一个区间值,而不是一个特定的值

看图:

css实现多列布局的实践

以上,但是不影响布局效果的实现,多栏布局其实也可以做到响应式的效果

运行完就会得到上图的结果,设置 column-count: 2; column-width:100px; column-gap: 10px; 是核心点,需要注意的一点是:column-count的值大于2时 inner_wrapper的宽度 < column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了,没关系,看个动图: 为了方便讲解我本地设置column-count: 3时的效果,右上角340px是一个边界,小于340px时会变两列;

因为当 column-count: 2 设置为2 时。变成单列时有一个区间值,而不是一个特定的值
看图:

以上,但是不影响布局效果的实现,多栏布局其实也可以做到响应式的效果

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/4458.html

(0)
上一篇 2018年2月27日 09:37
下一篇 2018年2月28日 09:48

相关推荐

  • 第九章——CSS部分:层效果与溢出管理

    div称为层,更多的是因为它的z轴属性,可以实现层叠效果,例如: <div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div> <div style=”position:absolute;z-ind...

    2017年5月24日
    0741
  • 第六章——css部分:基本属性与CSS

    一、标签属性与样式 1、网页内容根据想要在作用选择对应在标签 2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。 直接能够敲的出来我们成为属性(attribute),类似于字体在color等。 敲...

    2017年5月22日
    0660
  • DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

    CSS边框虚线 这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。 边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例...

    2017年11月17日
    0660
  • 使用css的border属性实现三角形

    使用css的border属性实现三角形 1. border使用方法 2. border 三角形 2.1. 三角形原理,我们来看一个普通的底部边框 2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线 2.3. 我们在左边边添加一个...

    2018年5月7日
    01222
  • 自学也都能学会CSS,还参加DIVCSS5培训班?

    自学也都能学会CSS,为什么还参加DIVCSS5培训班? 自己通过自己努力可以学会DIV CSS布局技术,但需要不断摸索,牵扯问题特别多,干扰问题也比较多,这样会导致学习进度相当慢,进步也自然慢。 参加DIVCSS5开始的CSS...

    2015年12月1日
    0660
  • 学会DIV+CSS布局是否有利于找工作?

    学习了CSS布局,不会程序开发依然可以建设属于自己网站,买卖产品、装修装修淘宝均可。 可以找到什么工作呢? 1、后台开发程序员: 很多网络公司都要求程序员会CSS、熟悉CSS甚至精通CSS技术; 2、网页美工设计师: ...

    2015年12月1日
    0640
  • css+div布局学习步骤?

    认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 基础学习 1、了解CSS作用是什么? 2、css基础知识 3、了解常用css属性样...

    2017年12月19日
    0730
  • css涉及的英语单词!

    Css(cascading  style sheet)  (级联样式表) a:active 单击鼠标左键 italic(倾斜) word-spacing  单词和单词之间的距离 underline下划线    Font-size文字的大小 Background-color:背景颜色 Background-attachme...

    2018年4月28日
    0750

发表评论

您的电子邮箱地址不会被公开。

评论列表(1条)

  • 懿古今
    懿古今 2018年3月14日 14:11

    现在折腾主题,好像懂CSS的比较牛