4种方法生成三个并排的大小相等的元素

基本的dom结构如下：

div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
</div>

第一种方式：使用flex布局

div.container{
    display: flex;
}
div.item {
    flex: 1;
    height: 100px;
    background-color: #d71c1c;
    text-align:center;
    border:1px solid #dddddd;
}

第二种方式：使用width:33.3%来实现

div.container{
    height: 100px;
    overflow: hidden;
}
div.item{
    width: 33.3%;
    background-color: green;
    text-align:center;
    float:left
}

第三种方式：使用display:inline-block来布局

div.container{
    height: 100px;
}
div.item {
    display: inline-block;
    width: 33.3%;
    text-align:center;
    border:1px solid #dd4444;
    margin-left:-5px;
}

第四种方式：使用table-cell来布局

div.container{
    display: table;
    width: 100%;
}
div.item {
    display: table-cell;
    border:1px solid #dddddd;
}