0

ラッパー内に3つのdivがあります：

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

'leftbar'と'middle'はどちらも左に浮かんでいますが、'rightbar'は右に浮かんでいます。「ラッパー」がheight:100%; clear:both;設定されました。

ただし、「中央」に大量のテキストまたはコンテンツがある場合は、「ラッパー」divがオーバーフローします。なぜこれが起こっているのか理解するのに苦労しています。

私のCSSは次のとおりです。

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

アドバイスをいただければ幸いです。

4

5 に答える 5

2

フォームoverflow:autoに追加#textcontentおよび削除し、height:100%#textcontent#maincontent

于 2012-12-10T05:08:04.507 に答える
1

質問を編集していると、それがどのようにオーバーフローしているかがわかりました。これは、を使用しているheight: 100%;ため、divがビューポートを超えないため、代わりheight: auto;に使用し、Musaが指示したように代わりに使用することもoverflow: auto;できます#textcontent。clear: both;ファイヤーバグ付き）

于 2012-12-10T05:01:40.777 に答える
1

これは、いくつかのマイナーな追加が加えられたcssファイルです。

  • バーのテキスト整列
  • ラッパーの幅は1000pxに設定されているため、すべてのpxがバー間で均等に分散されます。
#wrapper {
width: 1000px;
height: auto;
margin:auto;
padding: 30px;
margin-top: 40px;
background-color:#FFF;
color:#000;
border: 2px solid #828fc4;
clear:both;
overflow:auto;
}

#leftbar {
float:left;
width: 250px;
padding: 5px;
text-align:center;
}

#middle {
float:left;
width: 400px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dotted #2B308C;
border-left: 1px dotted #2B308C;
text-align: center;
}

#rightbar {
float:right;
width: 250px;
padding: 5px;
text-align:center;
}

ちょうど私の2セント

于 2012-12-10T05:37:53.130 に答える
0

テキストのみに必要な場合は、CSS3列を使用してみてください。

于 2012-12-10T05:02:14.127 に答える
0

オーバーフロープロパティを追加し、高さをautoに変更します。

#wrapper {
    width: 1000px;
    height: auto;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
    overflow:hidden;
}
#middle {
    float:left;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}
于 2012-12-10T05:09:04.073 に答える