css多种方式实现等宽布局的示例代码

本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。

1、使用table-cell实现(兼容ie8)

<style>
    body,div{
        m arg in: 0;
        padding: 0;
    }
    .table-layout{
        dis play : table;/*父元素必须设置为table*/
        table-layout: fixed;/*这个属性一定要有，否则达不到效果*/
        width: 50%;
        mar gin : 20px auto;
    }
    .table-cell-layout{
        display: table-cell;/*子元素必须设置为table-cell*/
        h ei ght: 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 -i tem{
        flex: 1;
        height: 40px;
        border: 1px solid #666;
        border-left: none;
    }
    .flex- IT em: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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的 css多种方式实现等宽布局的示例代码全部内容，希望文章能够帮你解决 css多种方式实现等宽布局的示例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css多种方式实现等宽布局的示例代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200764

更新时间：2023-04-27 阅读：22次