阿里巴巴前端面试题：三列布局知多少？_阿里巴巴批发网前端页面布局-CSDN博客

本文链接：https://blog.csdn.net/u011263845/article/details/45271547

前几天收到阿里前端的面试通知，整体面试比较顺利，但是还是有个问题回答的不令面试官满意。
本来面试都快结束了，该涉及的都涉及了，而且交谈过程中比较轻松，面试官突然来了句你不是精通布局吗，给你3个DIV，你让他们一行单列布局，中间宽度自适应。

我脑门一转心想这还不简单吗，于是在他的imac上从容的敲出如下代码：

<style type="text/css">
    body,div{margin:0; padding:0;}
    #box{width:100%; height:600px; background:#ccc; float:left;}
    #middle{margin:0 200px 0 300px; height:600px; background:#56bcf3;}
    #left{width:300px; height:500px; background:#6bee68; float:left; margin-left:-100%;}
    #right{width:200px; height:500px; background:#F36; float:left; margin-left:-200px;}
</style>
</head>

<body>
    <div id="box">
        <div id="middle">中部宽度自适应</div>
    </div>
    <div id="left">左侧宽度固定</div>
    <div id="right">右侧宽度固定</div>
</body>

然后给他解释说把中间的那个div嵌套一个div盒子，设置左右div的margin-left为负数设置中间的div宽度自适应。

他说很好做的很正确但是问我有没有什么办法不嵌套其他的div，只用3个div进行布局。
我就说定位啪啪啪一大堆……

他不满意的回答是可以实现问我还有没有其他办法，我当时眉头一皱，确实没有什么更好的解决办法，然后面试结束后我一直在想这个问题，百思不得其解。

后来问了一下360做前端的前辈，他说用flex
自己编写代码如下：

<style type="text/css">
    body{
        display: flex;
        width: 100%;

    }
    .div1{
        background: red;
        height: 500px;
        width: 200px;

    }
    .div2{
        height: 500px;
        background: yellow;
        flex:2;
    }
    .div3{
        width: 200px;
        height: 500px;
        background: green;
    }
</style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>

确实实现了想要的效果，我想这应该才是当时面试官想考察的重点。
可惜人生没有如果。
仔细研究了一下flex其实这样也可以实现，
代码如下：

<style type="text/css">
    body {
    display:box;
    display:-webkit-box;
    display:-moz-box;
    width:100%;
    height: 500px;
    margin:0 auto;
}
.col_1 {
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    background-color:#ffc;
}
.col_2 {
    background-color:#ccf;
    box-flex:2;
    -moz-box-flex:2;
    -webkit-box-flex:2;
}
.col_3 {
    background-color:#fcf;
    box-flex:2;
    -moz-box-flex:2;
    -webkit-box-flex:2;
}
</style>
</head>
<body>
    <div class="col_1">111</div>
    <div class="col_2">222</div>
    <div class="col_3">333</div>
</body>