html - 流体和固定布局

标签 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/

上一篇:javascript - 函数在 Chrome 中运行但在 Firefox 中不运行说函数未定义

下一篇:javascript - 绝对定位的 div,页面其余部分可滚动

相关文章:

javascript - jquery 获取 <li> 内的文本

jquery - jQuery 的 'Selectmenu' 的自定义样式

css - 在 1140 网格的移动 View 中更改堆栈顺序?

css - 流体网格布局控制

html - 如何创建具有流动定位的类似表格的布局? [里面的图片]

html - 如何在 CSS 中将按钮放在图像旁边?

html - 如何删除图片旁边的下划线?

javascript - 无法使 D3 y 轴和列沿 x 轴正确对齐

css - LESS CSS 中的转义字符会插入不需要的空格

jquery - 在 iframe 内的链接中应用 jquery