Question

divs有问题..

HTML

<div id="site-menu">menu1
    <br>menu2
    <br>menu3
    <br>menu4
    <br>menu5
    <br>menu6
    <br>
</div>
<div id="site-content">
    <div class="site-content">
        <div id="site-content-left">left</div>
        <div id="site-content-right">right</div>
        <div class="clear"></div>
    </div>
</div>

CSS

.site-content {
    background:pink;
}
#site-content {
    background:red;
    margin-left:250px;
}
#site-content-left {
    background:orange;
    float:left;
}
#site-content-right {
    margin:5px 0 5px 0;
    background:blue;
}
#site-menu {
    float:left;
    width: 250px;
    padding: 20px 0;
    overflow:hidden;
    background:grey;
}
.clear {
    clear:both
}

清除后都有差距。菜单div高度差距很大（有菜单div的东西）..有什么解决方案吗？

jsFiddle.

Answer 1

clear:both使元素下降到文档中前面的任何浮动元素下面。

从margin: left

中删除#site-content

#site-content{
    background:red;
}

检查此fiddle

Answer 2

基本上有两种方法可以避免差距很大..

1）而不是明确：两者都使用clear：right 要么 2）为父节点和子节点定义适当的浮点数，而不是使用边距。正确的div结构不会给出上述差距。

下面的

是每个div的样式。

.site-content{background:pink; width:100%; float:left}
#site-content{
    background:red;
    margin-left:250px; 
}
#site-content-left{background:orange;float:left; width:5%; }
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%}
#site-menu{
    float:left;
    width: 250px;
    padding: 20px 0;
    overflow:hidden;
    background:grey;
}
.clear {clear:both}

css - 清除两者后的巨大差距

2 个答案: