今天在做一个作品展示网站的时候,出现一个小问题。在使用浮动的时候出现了点小问题,第一行向左浮动正常,第二行就出现问题了,空出了一个位,第二行空出了
两个位。一开始以为是margin或则padding的问题,但是清除了margin和padding后,问题依然存在。
html代码:
<div class="worksList">
<div class="worksBox">
<img src="images/zheye (1).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="worksBox">
<img src="images/zheye (2).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="worksBox">
<img src="images/zheye (3).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="worksBox">
<img src="images/zheye (4).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="worksBox">
<img src="images/zheye (5).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="worksBox">
<img src="images/zheye (6).png"/>
<div class="showBigBtn">点击查看大图</div>
</div>
<div class="clear"></div>
</div>
css代码:
.worksList .worksBox
{
float:left;
margin-left:80px;
-webkit-box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
width:320px;
padding:10px;
background:white;
text-align:center;
margin-bottom:20px;
}
以前经常做这种布局,但是浮动却没有出现这种问题。于是,我翻看以前的代码,终于发现问题了!原因在于:我没有设置固定的高度。于是我设置了固定高度,问题就解决了。