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布局有哪些好处和坏处。

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

    2024年7月24日
    00
  • 经验分享htmlcss如何让字发光。

    在HTML和CSS中,我们可以使用一些特定的属性和技术来使文本发光,这可以通过使用CSS的textshadow或者filter属性来实现,以下是详细的技术教学: (图片来源网络,侵删) 1、textshadow 属性: 这个属性用于向文本添…

    2024年6月25日
    00
  • 小编分享css怎么实现分页功能的快捷键。

    使用CSS实现分页功能的快捷键是Ctrl + Shift + C。 在网页设计中,分页功能是非常常见的需求,它可以帮助用户更好地浏览和查找信息,提高用户体验,CSS 是一种用于描述网页样式的语言,虽然它本身并不具备实现分页…

    2024年7月25日
    00
  • 我来分享制作网页用什么语言,r语言制作网页。

    制作网页可以使用多种编程语言,其中最常用的是HTML、CSS和JavaScript,这些语言被广泛应用于前端开发,用于构建网页的结构和样式,并实现交互功能。 HTML(超文本标记语言)是网页的基础语言,它使用标签来定义网…

    2024年6月29日
    00
  • 我来分享html css设置字体大小。

    CSS是一种用于描述HTML文档样式的语言,它允许我们轻松地调整字体大小,在CSS中,我们可以使用`font-size`属性来设置字体大小,以下是关于如何使用CSS调整字体大小以及如何在HTML中设置字体大小的详细解答。 CSS如…

    2024年6月14日
    00
  • 教你html如何改字体颜色。

    HTML中改变字体颜色的方法有多种,下面将详细介绍几种常用的方法。 (图片来源网络,侵删) 1、使用内联样式(Inline Style) 在HTML元素中使用style属性来直接定义字体颜色。 语法格式:<element style="c…

    2024年6月26日
    00
  • 说说css按钮点击效果。

    CSS按钮点击效果是网页开发中常见的需求,可以通过CSS样式和JavaScript事件来实现,下面将详细介绍如何使用CSS和JavaScript创建一个简单的按钮点击效果。 我们需要定义一个HTML按钮元素: <button class="m…

    2024年6月18日
    00
  • 我来说说css与xsl有什么区别。

    CSS和XSL都是用来定义文档样式的语言,但是它们有很大的不同。XSL是XML的样式表,而CSS是HTML样式表。XSL采用的是转换方式,将一种格式的XML转换为另一种;而CSS不含任何转换动作,只针对XML文件中各个成分的外观属…

    2024年7月11日
    00

联系我们

QQ:951076433

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