前端布局问题

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