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

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

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

    body,div{
 margin: 0;
 padding: 0;
    }
    .table-layout{
 display: table;
 table-layout: fixed;
 width: 50%;
 margin: 20px auto;
    }
    .table-cell-layout{
 display: table-cell;
 height: 40px;
 border: 1px solid #666;
 border-left: none;
    }
    .table-cell-layout:first-child{
 border-left: 1px solid #666;
    }



    

 
li1
 
li2
 
li3
 
li4
 
li5
    

2、使用flex布局来实现

    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;
    }



    

 
li1
 
li2
 
li3
 
li4
 
li5
    

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