网页设计，DIV+CSS问题，浮动问题 20
在一个大的div中，有三个小的div都设置了左浮动，且在三个小div下都设置了一个清除浮动，宽充和高度都设计合理，为什么在dreamweaver中显示，从第二个div到第...
在一个大的div中，有三个小的div都设置了左浮动，且在三个小div下都设置了一个清除浮动，宽充和高度都设计合理，为什么在dreamweaver中显示，从第二个div到第三个div显示在下面一行，在浏览器中却显示正常求解
以下是源代码。
<body style="margin:0px auto;padding:0px;">
<div id="top">
<div class="top-f">
<div id="top-1-1"><img src="images/index_01.gif" width="261" height="120" /><img src="images/index_02.gif" width="10" height="120" /><img src="images/index_03.gif" width="272" height="120" /><img src="images/index_04.gif" width="31" height="120" /></div>
<div id="top-1-2"><img src="images/index_12.gif" width="31" height="53" align="right" ;/></div>
</div>
<div class="top-f">
<div style="width:315px; height:101px; background-image: url(images/middle_06.gif); background-repeat: repeat-x;"></div>
<div style="width:315px;height:72px;background-image:url(images/middle_11.gif);background-repeat:repeat-x;" ></div>
</div>
<div class="top-f">
<div id="top-3-1" style="width:111px;height:109px"><img src="images/right_07.gif" width="21" height="109" /><img src="images/right_08.gif" width="90" height="109" /></div>
<div id="top-3-2" style="width:111px;height:64px"></div>
</div>
<div id="clear"></div>
外部CSS样试为
#top {
background-color: #060;
height: 173px;
width: 1000px;
}
.top-f {
float: left;
}
#top-1-2 {
background-image: url(images/index_10.gif);
background-repeat: repeat-x;
height: 53px;
width: 574px;
}
.top-f {
float: left;
}
#clear {
clear: both;
}
#top-1-1 {
height: 120px;
width: 574px;
}
在dreamweaver cs5中显示为
在浏览器中显示为 展开
以下是源代码。
<body style="margin:0px auto;padding:0px;">
<div id="top">
<div class="top-f">
<div id="top-1-1"><img src="images/index_01.gif" width="261" height="120" /><img src="images/index_02.gif" width="10" height="120" /><img src="images/index_03.gif" width="272" height="120" /><img src="images/index_04.gif" width="31" height="120" /></div>
<div id="top-1-2"><img src="images/index_12.gif" width="31" height="53" align="right" ;/></div>
</div>
<div class="top-f">
<div style="width:315px; height:101px; background-image: url(images/middle_06.gif); background-repeat: repeat-x;"></div>
<div style="width:315px;height:72px;background-image:url(images/middle_11.gif);background-repeat:repeat-x;" ></div>
</div>
<div class="top-f">
<div id="top-3-1" style="width:111px;height:109px"><img src="images/right_07.gif" width="21" height="109" /><img src="images/right_08.gif" width="90" height="109" /></div>
<div id="top-3-2" style="width:111px;height:64px"></div>
</div>
<div id="clear"></div>
外部CSS样试为
#top {
background-color: #060;
height: 173px;
width: 1000px;
}
.top-f {
float: left;
}
#top-1-2 {
background-image: url(images/index_10.gif);
background-repeat: repeat-x;
height: 53px;
width: 574px;
}
.top-f {
float: left;
}
#clear {
clear: both;
}
#top-1-1 {
height: 120px;
width: 574px;
}
在dreamweaver cs5中显示为
在浏览器中显示为 展开
4个回答
展开全部
只能理解为你的排版兼容性不够好，即使目前在你的浏览器里面显示正常了，你换个浏览器或者同一个浏览器的不同版本，还是会出现排版问题的，网页设计是要求对任何浏览器都会有同样的效果，即使个别浏览器很难兼容，也要能够保证布局不会太乱。当然IE6除外
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
浮动最直接 最根本的原因就是两个float的宽度和 大于总宽度。注意 IE下的偏移和margin在浮动下值的变化
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
“且在三个小div下都设置了一个清除浮动”， 在最后统一清除浮动就行了，
追问
我发现是什么原因了，是因为三个DIV没有设计宽度，我只在三个div 的子DIV在设计宽度的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
亲。dw不管什么效果，及时全部显示不出来。只要浏览器正常就行了。最终效果已浏览器稳准。dw怎么显示都不用管。他有些时候他默认有边框什么的就会导致出错
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
