<分区>
标签 html css fluid-layout
<分区>
如何并排放置 2 个 div,一个 div 宽度为 75%,另一个宽度为 25%。另一个 div 的 margin:0 auto;在它的顶部,以使内容位于页面的中心,宽度为:986px;
请看下面的代码
#bodywrapper
{
margin:0 auto;
}
#green-portion
{
background:url('images/green_portion.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:75%;
position:absolute;
top:30%;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
display:none;
}
#blue-portion
{
width:25%;
background-color:#051f3b;
height:400px;
position:absolute;
top:30%;
bottom:0;
left:75%;
right:0;
overflow:hidden;
z-index:99999;
}
<div id="bodywrapper">
<div id="green-portion">
</div>
<div id="blue-portion">
</div>
</div>
最佳答案
#bodywrapper {
margin:0 auto;
}
#green-portion {
background:#00CC00;
width:75%;
height:400px;
top:30%;
float:left;
}
#blue-portion {
width:25%;
background-color:#051f3b;
height:400px;
top:30%;
float:right;
}
<div id="bodywrapper">
<div id="green-portion"></div>
<div id="blue-portion"></div>
</div>
关于html - 流体和固定布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17188618/