今天在做页面的时候,出现了一个问题,
代码如下:
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...</dd>
</dl>
<dl>
<dt><img src="images/a.jpg" /></dt>
<dd>交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...</dd>
</dl>
<div class="footer">
<span class="product">产品中心</span>
</div>
css 如下
dl{
width:210px;
float:left;
margin-left:20px;
margin-right:20px;
height:184px;
}
dl dd{
font-size:12px;
color:#4a4a4a;
line-height:24px;
}
.footer{
clear:left;
margin-top:50px;
height:250px;
background-color:#e5e5e5;
overflow:hidden;
}
明明footer有margin-top,但就是不起作用
最后经过百度,发现,说当有两个div时,当上面的div浮动时,下面的div没有浮动,即使第下面的div除了浮动,但是margin-top依然没有作用
有两种解释
一、在css2.1中,水平的margin不会折叠,垂直margin可能会在一些盒模型中被折叠
二、当第一个层浮动,第二个没浮动层的margin会被压缩
解决的思路:要浮动一起浮动,要不就一起不浮动
解决办法:
1、给下面的div加上float属性
2、在上面的div和下面的div之间加一个这样的div <div style="clear:both;"></div>