2

私はウェブページを持っていて、コンテナ内に2つのdivがありますcontent-とsidebar1。理由はわかりませんが、sidebar1divを右側に配置するcontentと、divの後に、サイドバーが横ではなく下に表示されます。

私のコード：

HTML

<div class="container">

  <div class="content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
    <div class="sidebar1">
    </div>
  <div class="footer">
    Footer text<!--end .footer --></div>
<!-- end .container --></div>

CSS

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}

私はまだHTMLに非常に慣れていないので、問題を理解していません。前もって感謝します！

4

5 に答える 5

3

コンテンツは親よりも10ピクセル小さいため、その横に192ピクセルのサイドバーを配置する余地はありません（960ピクセルの20％）。

あなたはこのような何かをすることができます：

#container {
    width: 450px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
    background: #dff;
}

#content {
    overflow: hidden;
    background: #fdd;
}
<div id="container">
    <div id="sidebar">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</p>
    </div>
    <div id="content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    </div>
</div>

上記のコードは、サイドバーをコンテナーの右側にフロートさせ、コンテンツdivがコンテナー内の残りのスペースを占有します。はoverflow: hidden、コンテナの全幅を占めるのではなく、サイズを決定するときに浮動要素に注意するようにdivに指示します。これが機能するためには、要素の前に浮動要素がなければなりませんoverflow: hidden。

于 2013-03-16T19:04:09.883 に答える
0

問題は、要素がサイズ変更可能なウィンドウにフローティングしているため、十分なスペースがない場合、フローティングされた要素は次の行に移動することです。

簡単な解決策があります。すべてのフローティングボックスを収容するのに十分な幅の固定幅のコンテナにフローティング要素を入れます。

画面のサイズはわかりませんが、たとえば、次のように機能する可能性があります。

<div style="width: 1300px;">
    (Put the floated boxes here)
<div>
于 2013-03-16T19:05:24.430 に答える
0

実際には<div>コンテナ内に 3 つの s がありますが、それが意図的かどうかはわかりません。そして、あなたはあなた.contentのを与えるべきwidth: 80%;です。

于 2013-03-16T19:02:03.660 に答える
0

要素がコンテナに対して広すぎるという事実に関係しています。サイドバーを .content 内に配置するか、幅を調整してください。1 つのオプションを次に示します。

http://jsfiddle.net/cKMa2/2

.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 78%;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.footer {
    clear: both;
}

<div class="container">
    <div class="sidebar1">Some content Some content Some content</div>
    <div class="content">
         <h1>Heading</h1>

        <p>Just some dummy text.</p>
    </div>
    <div class="footer">Footer text</div>
</div>
于 2013-03-16T19:03:21.587 に答える
0

を使用float: leftする.sidebar1か、HTML の順序を変更して、サイドバーがコンテンツの前に来るようにしてください。

于 2013-03-16T18:59:26.333 に答える