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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值