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

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

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

相关推荐

  • css层叠样式表flex弹性盒模型

    1. 简介 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定Flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动称为容器...

    2018年4月27日 css自学教程
    0407
  • 每个网站设计师都应该知道的20个基本的CSS技巧。

    此篇文章是给初学者网站设计师的,一旦网站设计师了解了box模型是如何工作的,以及如何浮动这些框的,那么网站设计师与前端工程师合作起来就会非常顺畅了。为此,我们收集了大量的技巧来帮助你构建你想要的设计。...

    2023年2月14日 SEO操作
    03
  • 自学也都能学会CSS,还参加DIVCSS5培训班?

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

    2015年12月1日
    0350
  • 我来分享css怎么设置阴影效果图。

    CSS阴影效果是CSS3新增的一个非常实用的功能,它可以为元素添加立体感和深度,使得页面更加美观,本文将详细介绍如何使用CSS设置阴影效果,包括内阴影、外阴影、线性阴影和径向阴影等。 一、内阴影(Inset Shadow)...

    2024年6月15日
    00
  • 学会DIV+CSS布局是否有利于找工作?

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

    2015年12月1日
    0223
  • HTML5前端的7个框架。

    随着互联网行业的快速发展,越来越多的年轻人选择互联网行业就业。HTML5是一个简单易上手非常实用的技能,专攻于HTML的开发人员的薪资也非常的不错。想要学习HTML的朋友,推吧推吧在这里分享7个常用的框架给大家...

    2022年7月4日
    0338
  • 页面优化包括哪些?HTML代码、CSS样式、JS、图片都是影响排名的要点。

    SEO如何做网站页面优化?网页优化包含了大量的内容,包括Html代码、CSS样式、JS、图片等。从页面优化的角度来看,针对不同的web资源,优化方法是不同的。接下来一起看看吧。 首先,网站管理员应根据不同的页面标...

    2023年2月20日
    01
  • 前端设计中应该了解的web登录。

    当时做登录这块的时候,被session、cookie、token各种概念差点整蒙圈了,上网查询相关概念,发现很多人都是类似的疑惑,比如: 来了字节跳动之后,前端很少接触HTTP请求之后的事情,而且登录相关的SDK封装的很好...

    2022年7月4日 建站资讯
    0131

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息