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

前端  /  管理员 发布于 7年前   171

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

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

<style>    body,div{        margin: 0;        padding: 0;    }    .table-layout{        display: table;/*父元素必须设置为table*/        table-layout: fixed;/*这个属性一定要有，否则达不到效果*/        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移动端vw+rem不依赖JS实现响应式布局的方法
    下一条：
    纯CSS实现表单验证的示例代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客