0

中央に固定幅 (1000px) の div を配置したいのですが、1 つの 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

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 に答える