我想在中心有一个固定宽度（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
试试这个...我认为这是你所追求的
<!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;
}