Question

div布局问题

html代码：
<div class="con7">
<img src="images/p_01.jpg" />
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
</div>
CSS代码：
.con7{ margin-top:10px; }
.con7 .p1{
height:106px;
background-image: url(../images/cf_01.gif);
background-repeat: no-repeat;
}
.con7 .p2{
height:107px;
background-image: url(../images/cf_02.gif);
background-repeat: no-repeat;
}
.con7 .p3{
height:108px;
background-image: url(../images/cf_03.gif);
background-repeat: no-repeat;
}
预览的时候p1，p2，p3这三个背景和p_01这个图片总是差了一段距离，该怎么设置

Answer 1

<img src="images/p_01.jpg" style="float:left;clear:both;">

.con7{ margin-top:10px; }
.p1{height:106px;background-image:url(../images/cf_01.gif) no-repeat;float:left;clear:both;}
.p2{height:107px;background-image: url(../images/cf_02.gif) no-repeat;float:left;clear:both;}
.p3{ height:108px;background-image: url(../images/cf_03.gif) no-repeat;float:left;clear:both;}

Answer 2

*{margin:0;padding:0}
{北京八方永信教育}

Answer 3

你把图片单独放在一个div里，
<div class="con7">
<div><img src="images/p_01.jpg" /></div>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
</div>
主要在第二行，其他地方不用改就可以了。