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

相关推荐

  • 2019年网站开发的八大趋势。

    熟悉前端开发的人应该都知道,最近几年,各种前端框架层出不从,H5开发模式也越来越流行,大前端时代也已经到来。每一年各种前端技术也应运而生,快速掌握最新的前端技术也是每一个开发者不可或缺的一门技能。如今…

    2022年7月4日
    0116
  • 小编分享css如何兼容ie8,火狐浏览器css兼容。

    在前端开发中,我们经常需要处理浏览器兼容性问题,IE8和火狐浏览器是两个常见的浏览器,它们的CSS兼容性问题也是我们需要重点关注的,本文将介绍如何使CSS兼容IE8和火狐浏览器。 我们来了解一下为什么会出现CSS兼…

    2024年6月30日
    00
  • 我来分享如何让img在div中垂直居中「img垂直居中对齐」。

    图片水平垂直居中的四种方法 1、打开Excel,在一个单元格中插入一张图片。调整图片的大小放在一个单元格里。点击图片,右键选择“设置图片格式”。 2、按住ctrl键选中两个层,这是工具栏下方会出现左对齐右对齐或者居…

    2024年6月28日
    00
  • 今日分享html如何裁剪图片。

    在HTML中裁剪图片通常需要借助CSS或者JavaScript来实现,由于HTML本身并不支持图像裁剪功能,我们需要利用上述技术手段来控制图片显示的部分,从而达到裁剪的效果,以下是几种常见的方法: (图片来源网络,侵删) …

    2024年6月26日
    01
  • css文字上下居中怎么弄。

    段落还是其他文本元素,我们都希望能够让它们在页面上垂直居中显示,CSS提供了多种方法来实现文字的上下居中,下面将介绍几种常用的方法。 1. 使用line-height属性: line-height属性用于设置行高,它可以用来控制…

    2024年6月28日
    00
  • 说说css怎么设置背景宽,Css怎么设置背景图像。

    在CSS中,我们可以使用不同的属性来设置背景的宽度和图像,下面将详细介绍如何设置背景宽度和背景图像。 1. 设置背景宽度: 要设置背景宽度,可以使用`background-size`属性,该属性用于指定背景图像的宽度和高度,…

    2024年6月28日
    00
  • 今日分享网站使用css布局有哪些好处和坏处。

    网站使用CSS布局的好处 随着互联网技术的不断发展,网站的设计和开发变得越来越重要,在这个过程中,CSS布局成为了网站设计的主流技术,CSS(Cascading Style Sheets,层叠样式表)是一种用于描述网页外观和格式的…

    2024年7月24日
    00
  • 关于html如何设置背景图片的大小。

    要在HTML中设置背景图片的大小,可以使用CSS样式来实现,下面是详细的技术教学: (图片来源网络,侵删) 1、了解HTML和CSS的基本概念: HTML(HyperText Markup Language)是用于创建网页内容的标准标记语言。 CSS…

    2024年6月21日
    00

联系我们

QQ:951076433

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