您的位置：首页 > 职场人生

阿里巴巴前端面试题：三列布局知多少？

2015-04-25 16:52 411 查看

前几天收到阿里前端的面试通知，整体面试比较顺利，但是还是有个问题回答的不令面试官满意。

本来面试都快结束了，该涉及的都涉及了，而且交谈过程中比较轻松，面试官突然来了句你不是精通布局吗，给你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>

只不过display：box存在很多兼容问题，而且自适应的话还是flex比较好，不得不说css3真的很强大，很杂乱，很多js多行代码才能实现的现在css3一两行代码就实现了。

刨根问底了解每个标签的来龙去脉以及浏览器兼容问题才是前端开发的王道，前端之路，任重道远。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航