2008年阿里巴巴前端开发工程师面试题解

用CSS实现如下布局

看似简单的布局 但实际操作起来 可能会遇到一些问题

网上很多地方把中间的空隙算成10px了 我这里就弄的准备一点 实际上中间的空隙是8px

这里和大家分享一下我的代码:

css部分
==================================
.one{
float:left;
width:90px;
height:153px;
background:#cdd8da;
}

.two{
float:left;
clear:left;
margin-top:8px;
width:90px;
height:118px;
background:#cdd8da;
}

.three{
margin-left:98px;
_margin-left:95px;
width:217px;
height:279px;
background:#cdd8da;
}

html部分
==================================
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

和网上很多总结一样 这个布局主要注意的有两个问题 一是清除第二个div的左浮动 第二个是注意IE3px的BUG

还有个问题 网上的很多解答 是在第三个div里加上了zoom:1 我不知道为什么要加上这句 还请各位同学指教···

Write a comment