完成下面的布局:
思路 代码是这样的:
html:
<!-- 特色超市 -->
<div class="feature">
<div class="ft_title good_title">特色超市</div>
<div class="ft_content">
<a href="javascrpt:;">
<img src="./uploads/market_1.jpg" alt="">
</a>
<a href="javascrpt:;">
<img src="./uploads/market_2.jpg" alt="">
</a>
<a href="javascrpt:;">
<img src="./uploads/market_3.jpg" alt="">
</a>
<a href="javascrpt:;">
<img src="./uploads/market_4.jpg" alt="">
</a>
<a href="javascrpt:;">
<img src="./uploads/market_5.jpg" alt="">
</a>
</div>
</div>
css:
<style>
.feature .ft_content a {
float: left;
width: 50%;
}
.feature .ft_content a img {
Width: 100%
}
</style>
这样可以实现布局,
bug 是(看下图)页面缩放时会出现这样的效果: 一张图片被挤下去了.
原因是(看下图) : 在缩放时 2号+3号的高度 < 1号的高度 , 4号浮动时就会跑到 3号下面
解决办法是:1, 在4号盒子上加 clear:both
2, 给3号盒子加1px的padding-bottom