Question

努力将背景定位在嵌入式div＃的周围..我认为这会是我想念的小事 - 任何想法？

蓝色div边框就是为了显示我在改变代码时列的位置 div＃wrapper（当我对它进行排序时将是一个背景图像） - 绿色应该在嵌入的div后面，高度相应地适应

代码在这里：http://jsfiddle.net/SparrowWoods/rREAh/689/

<div id="wrapper">
<div id="mainContent">
    <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
</div><!--end main column-->
<div id="sideContent">
    <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
</div><!--end right column-->
</div><!--end content-->
#wrapper{
    background-color:green;
    height:auto;
    width:100%;
    padding:5%;
    margin-left:10%;
    margin-right:10%;
    position:relative;
}
#mainContent {
    border: 1px solid blue;
    float: left;
    width: 60%;
    height: auto;
    padding:5%;
}
#sideContent {
    border: 1px solid blue;
    float: left;
    width: 25%;
    height: 100%;
    padding:2%;
}

Answer 1

在这种情况下，列下方的easiest solution is to use a clearing float：

<br style="clear:both;padding:0">

您遇到的问题是您正在使用float:left将列放在彼此旁边。正因为如此，它们被从流布局中取出，有效地使父对象就浏览器而言是空的。这就是为什么你只看到它为填充着色。

替代方法是使用display:inline-block将列放在彼此旁边，但这可能会产生一些其他问题，其间会出现空白。

Answer 2

添加一个浮点数：左;到您的包装元素：

#wrapper{
    float:left;
}

http://jsfiddle.net/rREAh/693/

Answer 3

背景不能覆盖内部div的原因是因为它们是浮动的。有几种解决方案。其中两个是。

为您的容器div（#wrapper）设置固定高度
在#maincontent和#sideContent下添加一个div，清除所有浮动clear:both fiddle

苦苦挣扎在div /背景问题中定位div＃

3 个答案: