css多种多样方法完成等高合理布局的示例编码

日期:2021-03-01 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

本文讲的等高合理布局是在不手动式设定元素高宽比的状况下,应用纯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后,再设定宽度就沒有实际效果了,因而必须再包裹1层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">
                制造行业的发展趋势必定带来岗位的细分,在前端开发行业也1样,现阶段制造行业前端开发有下面这几个方位:页面呈现客户体验和可浏览性方位、
                后的js/nodejs开发设计方位、audio/video音视頻富新闻媒体方位、SVG/canvas/webGL动效艺术创意主要表现与数据信息可视性化方位、专用工具基本建设
                文本文档管理方法內部站基本建设的前端开发运维管理方位和大会预订团建机构对外品牌宣传策划的前端开发经营方位。
            </li>
            <li class="table-cell-layout">
                因为每一个人的性情特质,发展亲身经历的差别,当然合适的方位也不1样。理性细致有设计方案情况能够潜心于客户体验,纯逻辑性工程项目
                化逻辑思维浓厚则更合适偏后开发设计,数学课物理学强大能够考虑到数据信息可视性化方位,沟通交流融洽工作能力很强能够朝着前端开发经营方位勤奋。
            </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">
            制造行业的发展趋势必定带来岗位的细分,在前端开发行业也1样,现阶段制造行业前端开发有下面这几个方位:页面呈现客户体验和可浏览性方位、偏后
的js/nodejs开发设计方位、audio/video音视頻富新闻媒体方位、SVG/canvas/webGL动效艺术创意主要表现与数据信息可视性化方位、专用工具基本建设文本文档管理方法內部站基本建设的
前端开发运维管理方位和大会预订团建机构对外品牌宣传策划的前端开发经营方位。
        </li>
        <li class="flex-item">
            因为每一个人的性情特质,发展亲身经历的差别,当然合适的方位也不1样。理性细致有设计方案情况能够潜心于客户体验,纯逻辑性工程项目化思
维浓厚则更合适偏后开发设计,数学课物理学强大能够考虑到数据信息可视性化方位,沟通交流融洽工作能力很强能够朝着前端开发经营方位勤奋。
        </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: ⑼999px;
        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">
            制造行业的发展趋势必定带来岗位的细分,在前端开发行业也1样,现阶段制造行业前端开发有下面这几个方位:页面呈现客户体验和可浏览性方位、偏后
的js/nodejs开发设计方位、audio/video音视頻富新闻媒体方位、SVG/canvas/webGL动效艺术创意主要表现与数据信息可视性化方位、专用工具基本建设文本文档管理方法內部站基本建设的
前端开发运维管理方位和大会预订团建机构对外品牌宣传策划的前端开发经营方位。
        </li>
        <li class="item">
            因为每一个人的性情特质,发展亲身经历的差别,当然合适的方位也不1样。理性细致有设计方案情况能够潜心于客户体验,纯逻辑性工程项目化思
维浓厚则更合适偏后开发设计,数学课物理学强大能够考虑到数据信息可视性化方位,沟通交流融洽工作能力很强能够朝着前端开发经营方位勤奋。
        </li>
        <li class="item">
            在学员时期,大伙儿都很纯碎,我喜爱这个就学这个,比如,许多女生很喜爱CSS,写网页页面,做实际效果。可是,等她刚开始找工作中,還是接
触真正的制造行业圈子的情况下,事儿就产生了转变。
        </li>
    </ul>
</body>

应用margin负值有1个缺陷,如图:

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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css 新闻媒体查寻 aspect 返回下一篇:没有了