登录  /  注册
首页 > web前端 > css教程 > 正文

css基础多栏布局

不言
发布: 2018-04-24 16:45:44
原创
1469人浏览过

这篇文章主要介绍了关于css基础多栏布局 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

前端布局

基础布局,主要展现在移动端,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================*/    <!--一列-->
    <ul class="one clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--两列-->
    <ul class="two clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--三列-->
    <ul class="three clearfix">
        <li>入选CCTV中国</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家</li>
        <li>了解植发需求</li>
        <li> 推荐专业医师</li>
    </ul>

    <!--四列-->
    <ul class="four clearfix">
        <li>咨询</li>
        <li>定位</li>
        <li>检测</li>
        <li>定制</li>
        <li>辅助</li>
        <li>养护</li>
        <li>咨询</li>
        <li>定制</li>
    </ul>/*==================html end================*/
登录后复制
  1. 传统计算方式:浮动+宽度精确计算

        /*==============传统(浮动+清浮动+宽度精确计算) 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=================*/
    登录后复制
  2. 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/blog/2015/07/flex-grammar.html
    Flex 布局示例 http://static.vgee.cn/static/index.html

    相关推荐:

    CSS基础语法之CSS的3种引入

    以上就是css基础多栏布局 的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号