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

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

关键词：网站建设，创建网站，免费建站平台，智能建站，企业建网站

本文讲的等宽合理布局是在不手动式设定元素宽度的状况下，应用纯css完成各个元素宽度都非常的实际效果。

1、应用table-cell完成(适配ie8)

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    .table-layout{
        display: table;/*父元素务必设定为table*/
        table-layout: fixed;/*这个特性1定要有，不然达不到实际效果*/
        width: 50%;
        margin: 20px auto;
    }
    .table-cell-layout{
        display: table-cell;/*子元素务必设定为table-cell*/
        height: 40px;
        border: 1px solid #666;
        border-left: none;
    }
    .table-cell-layout:first-child{
        border-left: 1px solid #666;
    }
</style>

<body>
    <ul class="table-layout">
        <li class="table-cell-layout">li1</li>
        <li class="table-cell-layout">li2</li>
        <li class="table-cell-layout">li3</li>
        <li class="table-cell-layout">li4</li>
        <li class="table-cell-layout">li5</li>
    </ul>
</body>

2、应用flex合理布局来完成

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    .flex-layout{
        display: flex;
        width: 50%;
        margin: 20px auto;
    }
    .flex-item{
        flex: 1;
        height: 40px;
        border: 1px solid #666;
        border-left: none;
    }
    .flex-item:first-child{
        border-left: 1px solid #666;
    }
</style>

<body>
    <ul class="flex-layout">
        <li class="flex-item">li1</li>
        <li class="flex-item">li2</li>
        <li class="flex-item">li3</li>
        <li class="flex-item">li4</li>
        <li class="flex-item">li5</li>
    </ul>
</body>

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

上一篇：CSS3完成酷炫的切成片式照片轮播实际效果 返回下一篇：没有了