0

试图掌握布局我试图获得一个全宽的标题，标题内部是一个左侧边栏和一个右侧边栏。正文分为 5 个部分全宽，左右侧边栏，3 列居中内容，页脚将与页眉相同。侧边栏的宽度是固定的，因此中心内容将根据屏幕大小进行压缩或扩展。我已经尝试了很多方法来实现这一点，但都失败了！我的最佳尝试如下，当我添加“注释”代码时，它会按我的意图添加左侧标题边栏，但将左侧边栏移动到中心部分，左侧边栏应该是现在的中心部分。

我想我很接近但缺少一些东西。有人可以指出我正确的方向吗？

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

4

1 回答 1

2

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

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

于 2013-04-02T15:57:34.267 回答