提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css完成等高规划的三种体式格局(代码示例)【css教程】,html5,高度自适应,布局,html,css

本篇文章给人人带来的内容是关于css完成等高规划的三种体式格局(代码示例),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

本文讲的等高规划是在不手动设置元素高度的情况下,运用纯css完成各个元素高度都相称的结果。如图:


1、运用table-cell完成(兼容IE8)

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .table-layout-container{
        width: 50%;
        margin: 20px auto;
    }
    .table-row-layout{
        /* 当元素display设置为table-row后,再设置宽度就没有结果了,因而须要再包裹一层div,然后给它设置宽度 */
        display: table-row;
    }
    .table-cell-layout{
        display: table-cell;
        width: 33.33%;
        padding: 10px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .table-cell-layout:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <div class="table-layout-container">
        <ul class="table-row-layout">
            <li class="table-cell-layout">
                行业的生长必定带来职业的细分,在前端范畴也一样,现在行业前端有下面这几个方向:界面展示用户体验和可接见性方向、
                后的js/nodejs开辟方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、东西建立
                文档治理内部站建立的前端运维方向以及集会预定团建构造对外品牌宣扬的前端运营方向。
            </li>
            <li class="table-cell-layout">
                由于每个人的性情特质,生长阅历的差别,天然合适的方向也不一样。感性细致有设想背景能够专注于用户体验,纯逻辑工程
                化头脑浓重则更合适偏后开辟,数学物理刁悍能够斟酌数据可视化方向,沟通谐和才能很强能够朝着前端运营方向勤奋。
            </li>
            <li class="table-cell-layout">
                在学生时期,人人都很地道,我喜好这个就学这个,比方,许多女生很喜好CSS,写页面,做结果。然则,等她最先找工作,
                照样打仗实在的行业圈子的时刻,事变就发生了变化。
            </li>
        </ul>
    </div>
</body>

2、运用flex规划完成

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .flex-layout{
        display: flex;
        width: 50%;

        margin: 20px auto;
    }
    .flex-item{
        width: 33.33%;
        padding: 10px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .flex-item:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <ul class="flex-layout">
        <li class="flex-item">
            行业的生长必定带来职业的细分,在前端范畴也一样,现在行业前端有下面这几个方向:界面展示用户体验和可接见性方向、偏后
的js/nodejs开辟方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、东西建立文档治理内部站建立的
前端运维方向以及集会预定团建构造对外品牌宣扬的前端运营方向。
        </li>
        <li class="flex-item">
            由于每个人的性情特质,生长阅历的差别,天然合适的方向也不一样。感性细致有设想背景能够专注于用户体验,纯逻辑工程化思
维浓重则更合适偏后开辟,数学物理刁悍能够斟酌数据可视化方向,沟通谐和才能很强能够朝着前端运营方向勤奋。
        </li>
        <li class="flex-item">
            在学生时期,人人都很地道,我喜好这个就学这个,比方,许多女生很喜好CSS,写页面,做结果。然则,等她最先找工作,照样接
触实在的行业圈子的时刻,事变就发生了变化。
        </li>
    </ul>
</body>

3、应用margin完成等高规划(现实开辟中不发起运用)

完成上面的等高规划除了能够运用table-cell、flex规划外还能够应用margin负值来完成

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .marign-layout{
        width: 50%;
        margin: 20px auto;
        overflow: hidden;
    }
    .item{
        float: left;
        width: 30%;
        padding: 10px;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .item:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <ul class="marign-layout">
        <li class="item">
            行业的生长必定带来职业的细分,在前端范畴也一样,现在行业前端有下面这几个方向:界面展示用户体验和可接见性方向、偏后
的js/nodejs开辟方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、东西建立文档治理内部站建立的
前端运维方向以及集会预定团建构造对外品牌宣扬的前端运营方向。
        </li>
        <li class="item">
            由于每个人的性情特质,生长阅历的差别,天然合适的方向也不一样。感性细致有设想背景能够专注于用户体验,纯逻辑工程化思
维浓重则更合适偏后开辟,数学物理刁悍能够斟酌数据可视化方向,沟通谐和才能很强能够朝着前端运营方向勤奋。
        </li>
        <li class="item">
            在学生时期,人人都很地道,我喜好这个就学这个,比方,许多女生很喜好CSS,写页面,做结果。然则,等她最先找工作,照样接
触实在的行业圈子的时刻,事变就发生了变化。
        </li>
    </ul>
</body>

运用margin负值有一个瑕玷,如图:

底部边框不见了,由于被父元素的overflow: hidden;切割掉了。

以上就是css完成等高规划的三种体式格局(代码示例)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css完成等高规划的三种体式格局(代码示例)【css教程】,html5,高度自适应,布局,html,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线