Question

试图掌握布局我试图获得一个全宽度的标题，标题内部是左侧边栏和右侧边栏。机身分为5个部分全宽，左右侧边栏，中心内容有3列，页脚与标题相同。侧边栏是固定宽度的，因此中心内容将根据屏幕尺寸压缩或扩展。我已经尝试了很多方法来实现这一目标，但却失败了！我最好的尝试如下，当我添加“注释”代码时，它按照我的意图添加左侧标题侧边栏，但将左侧边栏移动到中间部分，其中左侧边栏应该是它现在的中心部分。 / p>

我觉得我非常接近，却遗漏了一些东西。有人能指出我正确的方向吗？

HTML

<body> 
<div class="container">
    <div class="header">
        <!--<div class="headerleft">
            <div class="headerleftcon">leftcon</div>
            </div>-->
        <div class="header-content">Header
        </div>
    </div> 
    <div class="body">body
        <div class="left-sidebar">
            <div class="left-content">left sidebar</div>
        </div>
        <div class="right-sidebar">
            <div class="right-content">right sidebar</div>
        </div>
        <div class="content">Content
        <div class="left-col">
            <div class="left-colcontent">left col</div>
        </div>
        <div class="right-col">
            <div class="right-colcontent">right col</div>
        </div>
        </div>
    </div> 
    <div class="footer">
        <div class="footer-content">Footer</div>
    </div>
</div> 
</body>

CSS

html, body {
 height: 100%;
 width: 100%;
 padding: 0px;
 margin: 0px;}
.header, .footer{
 height: 80px;
 background-color: #EFEFEF;
 position: relative;}
.header-content{
 padding: 20px;
 text-align: center;}
/*.headerleft{
 height: 100%;
 background-color: red;
 width: 200px;
 float: left;}
.headerleftcon{
 padding: 0px 0px 0px 0px;}*/
.footer-content{
 padding: 20px;
 text-align: center;}
.container{
 height: 100%;}
.body{
 height: 100%;
 margin-top: -80px;
 margin-bottom: -80px;
 background-color: #C7DFFA;} 
.content{
 padding: 0px 0px 0px 0px;}
.left-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: left;} 
.right-sidebar{
 height: 100%;
 background-color: gray;
 width: 200px;
 float: right;}
.right-col{
 height: 500px;
 background-color: blue;
 width: 150px;
 float: right;} 
.left-col{
 height:500px;
 background-color: blue;
 width: 150px;
 float: left;} 
.left-content{
 padding: 100px 10px 100px 10px;
 margin: }
.left-colcontent{
 padding: 100px 10px 100px 10px;} 
.right-content{
 padding: 100px 10px 100px 10px;
 text-align: right;}
.right-colcontent{
 padding: 100px 10px 100px 10px;
 text-align: right;

JSFiddle

Answer 1

请看一下这个jsfiddle：http://jsfiddle.net/Ab2LT/

我不确定这是否是您期望的结果。我在div标题的末尾添加了<div style="clear:both"></div>以清除浮动的元素。

div布局;将div添加到标题后的侧边栏移动器

1 个答案: