Question

我想在中心有一个固定宽度（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的顶部？

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

Answer 1

试试这个...我认为你在追求什么

    <!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;
}

树浮动高度100％，一个固定宽度 - 中间溢出

1 个答案: