0

我想在中心有一个固定宽度（1000px）的 div，一个 div 向左浮动并填充背景，另一个填充右侧的背景。都有 100% 的高度。

<div id="left">
</div>
<div id="right">
</div>
<div id="main">
   Text
</div>

的CSS：

html, body{
height:100%;
min-height:100%;
width:100%;

padding:0;
margin:0;
}

#left{
position: relative;
width:50%;
height:100%;
top:0;
left:-500px;
float:left;
}
#right{
position:relative;
width:50%;
height:100%;
top:0;
right:-500px;
float:right;
}

#main{
width: 1000px;
margin:auto;
}

问题是内容突破了中间 div。它仍然在 div 中，但在其他 div 之下。

我该如何解决它，内容显示在中间 div 的顶部？

为了更好的想象：http ://codepen.io/anon/pen/eluGt

4

1 回答 1

0

试试这个......我认为这是你所追求的

    <!DOCTYPE html>
 <html>
      <head>
       <title>Failing Divs</title>
     </head>
    <body>
        <div id="left">
        </div>
      <div id="main">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div id="right">
        </div>

   </body>
</html>

...

html, body{
    height:100%;
    min-height:100%;
    width:100%;

    padding:0;
    margin:0;
}

p{
 padding:5px; 
}

#left{
    float:left;
    width:25%;
    height:100%;
    background: black;
}
#right{
    float:left;
    width:25%;
    height:100%;
    background: blue;
}

#main{
    float:left;
    width: 50%;
    height:100%;
    margin:auto;
    background: gray;
}
于 2013-01-23T01:27:24.967 回答