0

こんにちは、コンテンツの動的な幅について多くの質問があることは知っています..しかし、この特定の質問については、良い答えが見つかりませんでした.

私は自分のウェブサイト（いくつかのページ）に次の設定をしています

         +--------------+---------------------------------+
     |              |                                 |
     |  Sidebar     |       Content                   |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     +--------------+---------------------------------+

合計幅は 980px です

しかし、これらのページの一部ではサイドバーを使用していないため、左側に空白があります。

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

私は次のhtml構造を持っています

aside div と content div の両方に固定幅を指定し、aside には左にフロート、コンテンツには右にフロートを設定しました。

これを達成する簡単な方法はありますか？

4

2 に答える 2

1

これは、サイドバーがある場合とない場合の 2 つのケースを示す Fiddle です。

覚えておくべきことの 1 つは、display: blockプロパティは、コンテンツに関係なく、要素を利用可能なすべての幅に合わせるということです。これ.contentがfloat: left、サイドバーが存在する場合はサイドバーのすぐ隣に表示し、使用可能なすべてのスペースを埋めることです。

HTML

<div class="parent">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<br>

<div class="parent">
    <div class="content">Content</div>
</div>

CSS

.parent {
    border: 1px solid;
    margin: 0px auto;
    height: 100px;
    width: 300px;
}

.sidebar {
    height: 100%;
    width: 100px;
    float: left;
    background: rgb(255, 176, 176); /* Light Red */
}

.content {
    height: 100%;
    background: rgb(148, 148, 255); /* Light Blue */

}
于 2013-09-23T10:44:23.820 に答える
1

HTML

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

CSS

#main{
    width: 980px;
    margin: 0 auto;
}
#main:after{
    content: '';
    display: block;
    clear: both;
}
#sidebar{
    float: left;
    width: 200px;
}
#content{overflow: hidden;}
于 2013-09-23T10:08:56.177 に答える