编程论坛 → WEB前端(UI)

DVI+CSS布局遇到的问题

zys4416 发布于 2008-03-10 20:25， 1920 次点击

只有本站会员才能查看附件，请登录

如图，在DW中容器“bottom”与上两个容器无间隔，代码上明明设定了“margin-top: 10px; clear: both;”，在IE中显示却是有间隔的，但在Firefox却如同DW中显示的一样。

只有本站会员才能查看附件，请登录

初学DVI+CSS就遇到棘手的问题，不会要从上到下排列好3个横向的容器，再在中间的容器嵌入left和main吧？
希望各位赐教！

代码如下

程序代码：

#box {
    height: 280px;
    width: 380px;
    margin:0 auto;
    padding:10px;
}
#top {
    height: 100px;
    width: 380px;
    background-color: #FFFFCC;
}
#left {
    height: 110px;
    width: 100px;
    background-color: #FFFFCC;
    float: left;
    margin-top: 10px;
    clear: both;
}
#main {
    height: 110px;
    width: 270px;
    background-color: #FFFFCC;
    float: right;
    margin-top: 10px;
}
#bottom {
    height: 50px;
    width: 380px;
    background-color: #FFFFCC;
    margin-top: 10px;
    clear: both;
}

<div id="box">
  <div id="top">top 380x100</div>
  <div id="left">left 100x110</div>
  <div id="main">main 210x110</div>
  <div id="bottom">bottom 380x50</div>
</div>

[[it] 本帖最后由 zys4416 于 2008-3-10 20:47 编辑 [/it]]

3 回复

#2

lmhllr2008-03-11 10:13

这样行吗?

程序代码：

<style>
#box {
    height: auto;
    width:380px !important;
    width:400px;
    margin:0 auto;
    padding:10px;
}
#top {
    height: 100px;
    width: 380px;
    background-color: #FFFFCC;
}
#left {
    height: 120px;
    width: 100px;
    background-color: #FFFFCC;
    float: left;
    margin-top: 10px;
    clear: both;
}
#main {
    height: 120px;
    width: 270px;
    background-color: #FFFFCC;
    float: left;
    margin: 10px 0 10px 10px;
}
#bottom {
    height: 50px;
    width: 380px;
    background-color: #FFFFCC;
    clear: both;
}
</style>
<div id="box">
  <div id="top">top 380x100</div>
  <div id="left">left 100x110</div>
  <div id="main">main 210x110</div>
  <div id="bottom">bottom 380x50</div>
</div>

#3

zys44162008-03-11 16:05

问题解决了。
斑竹改了好些地方，不过我发现只要在#main加一条“margin-bottom: 10px”就行了……不知是否有特别的原因？

#4

zys44162008-03-11 16:45

进一步试验发现是float、clear、margin三个属性的问题。
例如，两行容器DVI1与DVI2，当DVI1有float:left or right，DVI2有clear:both时，DVI2的margin边界对DVI1无效,只有设定DVI1的边界。
不知是不是这样。

1