0

如何并排放置 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>
4

2 回答 2

5
#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>
于 2013-06-19T10:43:12.613 回答
1

的CSS;

#blue-portion {
     float: right;
}
于 2013-06-19T10:18:57.813 回答