前端布局问题

Question

已知HTML结构如下，在不考虑低版本浏览器兼容性的情况下，你可以用哪些方法来实现这个三列布局：左右两列定宽100像素，中间宽度自适应，三列之间没有间距。<div class="parent">        <div class="left">左列</div>        <div class="center">中间列</div>        <div class="right">右列</div></div>

Answer 1

.parent{
    text-align:center
}
.left{
    float:left;
    width:100px;
}
.right{
    float:right;
    width:100px;
}

Answer 2

上面的，别用什么float了。 flex布局就行。 .parent{ display:flex; height:300px; } .left,.right{ width:100px; } .center{ flex:1; border:1px solid white; }