1

div有问题。。

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 有一些东西）。请问有什么解决方案吗？

js小提琴。

4

2 回答 2

1

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

1) 代替 clear:both 使用 clear:right 或 2) 为父 div 和子 div 定义正确的浮动而不是使用边距。正确的 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}
于 2013-07-20T11:36:29.743 回答
0

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

margin: left从中删除#site-content

#site-content{
    background:red;
}

检查这个小提琴

于 2013-07-20T11:27:48.980 回答