资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS中怎么实现多行多列布局

本篇文章为大家展示了CSS中怎么实现多行多列布局,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

公司主营业务:成都网站制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出孟州免费做网站回馈大家。

方案一:标签补位
我们都知道,之所以对不齐是因为最后一行的子项目没有达到4个,space-between的对齐方式,自然会把中间空出来。既然如此,何不直接补位,让元素排满4个。

         
     
     
                                

效果如下:

CSS中怎么实现多行多列布局

如果子元素个数不是4个怎么办?我们细心观察,不难发现,最后一行的最小值是1个,那么我们只需要补位n-1个即可。如果只有3个,也可以用伪元素::after去补最后一个位置。

方案二:计算剩余空间
如果我们知道最后一行剩余空间的话,完全可以控制最后一个元素的边距或者缩放比例去占满剩下的空间,自然就能左对齐了。要做到这一点,首先得确定宽度和边距,宽度通常是已知的,我们只需要把边距确定下来,就能确认剩余空间。

接上面的的例子,假设一行有4个, 每个占比24%,4个就是24% * 4 = 96% , 那么可以确定总边距是4%,由于一行有4个元素,而最后一个的右边距是多余的,那么可以确定单个的边距为 4% / 3 = 1.333% , 计算出来后就可以开始写代码了:

                                  

效果如下:

CSS中怎么实现多行多列布局

可能有些小伙伴觉得懒得记,那么下面直接给出封装好的sass mixin, 复制即可使用:

/**  * 多列布局  * $count 项目数量  * $itemWidth 项目宽度,百分比,不含百分号  * $itemHeight 项目高度,随意  */ @mixin grid($count:4, $itemWidth:20, $itemHeight:auto) {     $rest: 100 - $itemWidth * $count; // 剩余空间     $space: percentage($rest/($count - 1)/100); // 边距     display: flex;     flex-wrap: wrap;      /*此处的*号建议替换成具体的布局容器(div,view...),以加快css解析*/     & > * {         flex: 0 0 #{$itemWidth + '%'};         height: $itemHeight;         margin-right: $space;         margin-bottom: $space;         box-sizing: border-box;          &:nth-child(#{$count}n) {             margin-right: 0;         }          &:nth-last-child(-n + #{$count}) {             margin-bottom: 0;         }          /*为了兼容space-between的布局,占满剩余空间*/         &:last-child {             margin-right: auto;         }     } }  /*使用方法*/ .list{     /* 一行4项,每项20%宽度 */     @include grid(4,20) }

以上为flex版本,假如你需要兼容ie浏览器,那么可以用float布局替换,float自动左对齐,也就不需要填充最后的剩余空间了。

方案三:网格布局
网格布局,默认就是左对齐,即使使用space-between。

                                  

效果如下:

CSS中怎么实现多行多列布局

上面的三个方案各有各的好处:

  1. 方案一的缺点是实现不够优雅,需要增加无用的占位标签。

  2. 方案二倒没什么缺点,除了写法会复杂点,但只要封装好mixin在sass中使用足够简单,即使需要兼容ie,也只需要换成float即可。

  3. 方案三,兼容性最差,无法在ie中正常使用,但用法最简单,布局甚至比flex还要强大。

上述内容就是CSS中怎么实现多行多列布局,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


网站题目:CSS中怎么实现多行多列布局
本文网址:http://cdkjz.cn/article/ihgjss.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220