Question

现在布局看起来像这样

enter image description here

我想要实现的是这个

enter image description here

<style type="text/css">
        body { color: #4B5E6F; font-size: 11px; line-height: 1.8em; }
        #main-content-wrapper { background: #F6F7F8; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 400px; }
        #content-left { float: left; width: 150px; min-height: 400px; background: #F6F7F8; }
        #nav-left { list-style-image: none; margin: 0px; }
        #nav-left li { margin: 6px 0px 6px 0px; }
        #nav-left li .nav-parent { font-family: 'open_sans_extraboldregular'; text-transform: uppercase; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 7px; font-size: 12px; }
        #nav-left li .nav-sub { font-family: 'open_sansregular'; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 5px; font-size: 11px; }
        #content { float: left; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 500px; width: 550px; padding: 10px; background: white; }
        #content-right { float: left; width: 216px; padding: 10px; background: white; }
        .nav-left-separator { background: url("resources/images/separator_menu.gif") repeat-x; height: 1px; display: block; margin: 0px 2px 0px 2px; }
        .page-header { font-family: 'open_sansbold'; font-size: 16px; color: #8E354C; line-height: 22px; font-weight: normal; border-bottom: 1px solid #E4E7D4; margin-bottom: 15px; margin-top: 15px; }
        ul { list-style-image: url('resources/images/fleche.gif'); margin: 4px 0px 0px 15px; }
        ul li span { font-family: 'open_sansbold'; }
    </style>

 <div id="main-content-wrapper">
            <div id="content-left">
                <ul id="nav-left">
                    <li><a href="" class="nav-parent">Menu</a></li>
                    <li><span class="nav-left-separator"></span></li>
                    <li><a href="" class="nav-parent">Menu</a></li>
                    <li><span class="nav-left-separator"></span></li>
                    <li><a href="" class="nav-parent">Menu</a></li>
                    <li><a href="" class="nav-sub">Lorem</a></li>
                    <li><a href="" class="nav-sub">Lorem</a></li>
                    <li><a href="" class="nav-sub">Lorem</a></li>
                    <li><span class="nav-left-separator"></span></li>
                    <li><a href="" class="nav-parent">Menu</a></li>
                    <li><span class="nav-left-separator"></span></li>
                    <li><a href="" class="nav-parent">Menu</a></li>
                    <li><span class="nav-left-separator"></span></li>
                    <li><a href="" class="nav-parent">Menu</a></li>
                </ul>
        </div>
            <div id="content">
                <div class="page-header">Lorem ipsum dolor sit amet</div>                
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
                electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div id="content-right">
                <div class="page-header">Lorem ipsum</div>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <div class="page-header">Lorem ipsum</div>
                <ul>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                </ul>
                <div class="page-header">Lorem ipsum</div>
                <ul>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                    <li><span>Overview</span></li>
                </ul>
        </div>
    </div>

我希望左和右的背景是彩色而不是从中心的颜色，如果中心内容向下延伸，那么左右背景也需要用它们的颜色着色。伙计们有什么建议吗？不管怎样，谢谢

Answer 1

使内容列div使用height : 100%。这应该可以在需要时拉伸包装纸，用其它柱子......理论上......

Answer 2

对于此类功能，您可以使用 display：table 属性。

例如这样写：

div{display:table-cell;width:100px;background:red}

.center{
    background:green;
    width:200px;
}
.right{background:yellow;}

选中此http://jsfiddle.net/HuxCZ/

Answer 3

以下是简单代码示例。您可以通过与此

进行比较来改变您的CSS

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">
            test

                <!-- Column one end -->
            </div>
            <div id="col2">
                Lorem ipsum dolor sit amet..................
                <!-- Column two end -->
            </div>
            <div id="col3">
                <!-- Column three start -->
                dgh

                <!-- Column three end -->
            </div>
        </div>
  </div>
</div>

CSS

#container3 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#89ffa2; /* column 3 background colour */
}
#container2 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:33.333%;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:33.33%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:29.33%;
    position:relative;
    left:68.67%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:29.33%;
    position:relative;
    left:72.67%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:29.33%;
    position:relative;
    left:76.67%;
    overflow:hidden;
}

DEMO http://jsfiddle.net/pV44s/1/

Answer 4

从内部div中删除float:left和min-height并添加display:table-cell;

http://jsfiddle.net/N8mDD/2/

希望这会有所帮助

颜色左右背景而不是中心

4 个答案: