0

Column1 (左) はコンテンツ用です。Column2 (右/サイドバー) は関連情報用です。レイアウトが 66%/34% だとします。サイドバーのコンテンツがない場合に、Column1 を自動的に 100% まで拡大する方法が必要です。何か案は。私はそれができることを知っています。方法が思い出せません。

+---------+---------+
| Content | sidebar |
+---------+---------+


+-------------------+
|Content/ no-sidebar|
+-------------------+
4

2 に答える 2

0

あなたはこのようなことを試みるかもしれません。2つの異なるHTMLケースを次に示します。

サイドバー付き：

<div id="container">
    <div id="sidebar">some content</div>
    <div id="main_content">main content</div>
</div>

サイドバーなし：

<div id="container">
    <div id="main_content">main content</div>
</div>

そして、これが条件付きでmain_contentdivのサイズを変更するCSSです。

#container {
    overflow: hidden;
}

#sidebar {
    width: 34%;
    float: right;
}

#main_content {
    width: 100%;
    float: left;
}
#main_content:nth-child(2) {
    width: 66%;
}
于 2012-09-06T15:14:23.497 に答える
0

HTML を次のように設定できます。

<div id="container">
    <div id="content">content
        <div id="sidebar">sidebar</div>
    </div>
</div>

そしてCSSのような;

#container{
    width: 100%;
}
#sidebar, #content{
    height: 200px;

}
#sidebar{
    width: 200px;
    float: left;
}
#content{
    background: orange;
}

pxパーセンテージに置き換えることができます。こちらがライブデモです。

于 2012-09-06T15:29:20.203 に答える