1

レイアウトは次のようになります

ここに画像の説明を入力してください

私が達成したいのはこれです

ここに画像の説明を入力してください

<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>

中央からではなく、左と右の背景に色を付けたいのですが、中央のコンテンツが下に伸びる場合は、左と右の背景もその色で色付けする必要があります。何か提案はありますか?とにかくありがとう

4

4 に答える 4

1

Remove float:left and min-height from you inner divs and add display:table-cell;

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

Hope this will help

于 2012-10-11T07:36:09.857 に答える
1

コンテンツ列のdivがを使用するようにしますheight : 100%。おそらく、必要に応じてラッパーを引き伸ばし、他の列を一緒に使用する必要があります...理論的には...

于 2012-10-11T06:56:32.490 に答える
1

このタイプの機能には、display:tableプロパティを使用できます。

たとえば、次のように記述します。

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

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

これをチェックしてくださいhttp://jsfiddle.net/HuxCZ/

于 2012-10-11T07:10:31.667 に答える
1

これがサンプルのプレーンコードです。これと比較することで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>

</ p>

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;
}​

デモhttp://jsfiddle.net/pV44s/1/

于 2012-10-11T07:11:10.740 に答える