HTML CSS Content div不会浮动

Question

我正在尝试将内容div放在两个背景div上，而是我的代码只在底部div上设置它。下面有2张图片，向您展示我想要实现的目标和发生的事情。

图1：我想要实现的目标

图2：问题所在

HTML：

<div class="middle">
<div class="middle_bot">


    <div id="content">
        <p class="big">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Curabitur tellus felis, sagittis at neque placerat, 
        laoreet mollis massa. Sed et purus mollis, fringilla 
        tellus et, tincidunt eros. Ut dolor ipsum, feugiat et 

        </p>
    </div>
</div>
</div>

CSS：

.middle
{

background-image: url(images/bg_middle.png); /* fallback */
background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* Saf4+, Chrome */
background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle.png),     -ms-linear-gradient(top, #000000, #009dca); /* IE10 */
background-image: url(images/bg_middle.png),      -o-linear-gradient(top, #000000, #009dca); /* Opera 11.10+ */
background-image: url(images/bg_middle.png),         linear-gradient(to bottom, #000000, #009dca); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);*/
    height: 40%;
    width: 100%;
}

.middle_bot
{

background-image: url(images/bg_middle2.png); /* fallback */
background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* Saf4+, Chrome */
background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle2.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle2.png),     -ms-linear-gradient(top, #000000, #ffffff); /* IE10 */
background-image: url(images/bg_middle2.png),      -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.10+ */
background-image: url(images/bg_middle2.png),         linear-gradient(to bottom, #000000, #ffffff); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle2.png);*/
    height: 50%;
    bottom:0;
    position:absolute;
    width: 100%;
}

#content
{
    background: url(images/content2.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}

Answer 1

这可以简化您的代码并复制您正在描述的布局：

CSS：

 #Navigation{
    height:50px;
    width:100%;
    color:white;
    text-align:center;
    background:black;}

#Middle{
    height:200px;
    overflow:visible;
    background:brown;}

#Content{
    margin:0px auto;
    width:200px;
    height:300px;
    position:relative;
    background:blue;}

#MiddleBottom{
    height:200px;
    background:green;}

HTML：

<div id="Navigation">navigation<div>

<div id="Middle">
    <div id="Content"></div>    
</div>

<div id="MiddleBottom"></div>

jsFiddle是here从这里开始，您可以调整它以满足您的需求。