css基础多栏布局

NoraXie 发布于2019-08-29 15:10 / 2918人阅读

摘要：前端布局基础布局，主要展现在移动端，端同样适用。分为一栏两栏三栏四栏。这里使用了两种方式实现。使用方式二，只需要考虑元素宽度即可，使用就可以实现分散居中的效果。

前端布局

基础布局，主要展现在移动端，pc端同样适用。分为一栏、两栏、三栏、四栏。
这里使用了两种方式实现。
首先设置基础样式：

/*==================common css start================*/
    ul{
        list-style: none;
        background: #f0f1f1;
        padding: 30px 15px;
    }
    li{
        background: #fff;
        text-align: center;
        border: 1px solid #5d2a22;
        padding: 15px;
        box-sizing: border-box;
    }
    .clearfix::after{
        content:"";
        display: block;
        clear: both;
    }
/*==================common css end================*/
/*==================html start================*/
    
    
        入选CCTV中国年度品牌
        获得Hair代理权
        签署5G筛查合作协议
        全国开设近20家分院
    
    
    
    
        入选CCTV中国年度品牌
        获得Hair代理权
        签署5G筛查合作协议
        全国开设近20家分院
    
    
    
    
        入选CCTV中国
        获得Hair代理权
        签署5G筛查合作协议
        全国开设近20家
        了解植发需求
         推荐专业医师
    
    
    
    
        咨询
        定位
        检测
        定制
        辅助
        养护
        咨询
        定制
    
/*==================html end================*/

传统计算方式：浮动+宽度精确计算

    /*==============传统(浮动+清浮动+宽度精确计算) start=================*/
        /*.one li:nth-child(n+2){
            margin-top: 15px;
        }
        .two li{
            float: left;
            width: 48%;
        }
        .two li:nth-child(even){
            margin-left: 4%;
        }
        .two li:nth-child(n+3){
            margin-top: 15px;
        }
        .three li{
            float: left;
            width: 32%;
            margin-left:2%
        }
        .three li:nth-child(3n-2){
            margin-left:0%
        }
        .three li:nth-child(n+4){
            margin-top: 15px;
        }
        .four li{
            float: left;
            width: 22%;
            margin-left:4%
        }
        .four li:nth-child(4n-3){
            margin-left: 0;
        }
        .four li:nth-child(n+5){
            margin-top: 15px;
        }*/
        /*==============传统(浮动+清浮动+宽度精确计算) end=================*/

flex计算方式：flex

        /*================flex(按照需求设置宽度) start=================*/
        /*为方便查看，这里不多带带去掉clearfix类名了*/
        .clearfix::after{
            content: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .one li{
            width: 100%;
        }
        .one li:nth-child(n+2){
            margin-top: 15px;
        }
        .two li{
            width: 48%;
        }
        .two li:nth-child(n+3){
            margin-top: 15px;
        }
        .three li{
            width: 32%;
        }
        .three li:nth-child(n+4){
            margin-top: 15px;
        }
        .four li{
            width: 23%;
        }
        .four li:nth-child(n+5){
            margin-top: 15px;
        }
        /*================flex(按照需求设置宽度) end=================*/

两种方式实现的效果一样，如下图：

总结

使用方式一的话，需要精确计算元素的宽度和元素的间隔，稍微有点偏差，布局就会被打乱。
使用方式二，只需要考虑元素宽度即可，使用justify-content: space-between;就可以实现分散居中的效果。
如果想了解更多flex布局，参考大神的文档吧
Flex 布局教程：语法篇 http://www.ruanyifeng.com/blo...
Flex 布局示例 http://static.vgee.cn/static/...

GPU云服务器云服务器 css布局 css布局教程学习css布局 css基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113140.html

H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
CSS3魔法堂：说说Multi-column Layout

摘要：注意会生成新的，因此不会出现效果。图中蓝色线框，位于内，作为间的分隔线。不可否认求学之路的艰辛苦闷。如此的努力，为了仅仅是能在大学逍遥快活一番这动机实在让人心寒，也正因如此造就了大学生的堕落。人类文明进步最有力的证明。前言是否记得《读者文摘》中那一篇篇优美感人的文章呢？那除了文章内容外，还记得那报刊、杂志独有的多栏布局吗？当我们希望将报刊、杂志中的阅读体验迁移到网页上时，最简单...

gitmilk 2019-08-30 12:58 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0