CSS Floatボーダーオーバーラップの問題

私はページの左側にメニューを浮かそうとしています。下のコンテンツに到達するのに十分な大きさになると、Firefoxはコンテンツを正確にオーバーランさせます。境界。ここで CSS Floatボーダーオーバーラップの問題

は、いくつかの項目とスクリーンショットです：期待通りの上に移動します

"ボックス4" のいくつかの項目で

し、別のが、その境界線がまま左に。ウー

HTML：

 
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
     " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
      <title></title> 
      <link rel="stylesheet" href="css/main.css" /> 
     </head> 
     <body> 
      <div id="menu"> 
       <ul> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
       </ul> 
      </div> 
      <div id="title"> 
       <img src="img/logo.png" alt="logo" /> 
       <span id="title_text">Title</span> 
      </div> 
      <div id="container"> 
       <div id="box1" class="topbox"> 
        <div class="title">Box 1 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box2" class="topbox"> 
        <div class="title">Box 2 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box3" class="topbox"> 
        <div class="title">Box 3 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
      </div> 
      <div id="box4"> 
       <div class="title">Box 4 Title</div> 
       <div class="content">Content goes here<br />line break</div> 
      </div> 
     </body> 
    </html>

CSS：

#menu { 
    float: left; 
    width: 100px; 
    padding-left: 0px; 
} 

#menu ul { 
    margin: 0px; 
    padding: 10px; 
} 

#title { 
    margin-left: 100px; 
    border: 1px #F00 dashed; 
    height: 40px; 
    font-size: 20pt; 
} 

#title_text { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 5px; 
} 

#container { 
    margin-left: 100px; 
} 

.topbox { 
    width: 30%; 
    height: 200px; 
    display: inline-block; 
    margin-top: 5px; 
    margin-bottom: 10px; 
    margin-right: 2px; 
    margin: none; 
    border: 1px #F00 solid; 
} 

.topbox .title { 
    text-align: center; 
    border-bottom: 1px #000 solid; 
    padding-top: 1px; 
} 

.content { 
    padding: 2px; 
} 

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
} 

#box4 .title { 
    display: inline; 
    border-right: 1px #000 solid; 
    border-bottom: 1px #000 solid; 
    padding-left: 2px; 
    padding-right: 2px; 
} 

#box4 .content { 
    display: inline; 
}

出典

2009-08-14 Rena

あなたはdoctype.comにこれを投稿したい場合があります。このスタイルの質問にはより適しています。 – Kredns

[CSSが次のdivの幅を変更しないのはなぜですか？]（http：// stackoverflow。com/questions/25475822/why-does-css-float-not-change-the-following-div） –

あなたが修正できるようにように、あなたの＃1 box4ルールを更新することにより：長いsidenav以下

#box4 { 
    border: 1px #000 solid; 
    margin-left: 100px; 
}

編集＃box4 CSS：

#box4 { 
    border: 1px #000 solid; 
    clear: both; 
}

出典

2009-08-14 02:02:09 Pat

これを行うと、メニューに項目が少なければ、無駄なギャップbox4の左側にある。 – Rena

あなたの他の非JavaScriptオプションは、長いsidenav（編集された例）の下に＃box4をプッシュすることです。 Javascriptを使用した場合、メニューが長すぎるためにbox4のスタイルを変更することができます。 – Pat

"box4" divの上に次の行を含めます。

<div style="clear:both;"></div>

だからあなたのコードは以下のようになりますこと：

が

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4"> 
<div class="title">Box 4 Title</div> 
<div class="content">Content goes here<br />line break</div> 
</div>

乾杯！それはしかし、100％の幅を持っていないでしょう

あなたが左に＃のbox4を浮く可能性が

出典

2009-08-14 08:48:35

これは実際にメニューの下にbox4をプッシュします。だから私は3つのトップボックスを持っていて、メニューの下までそれらの下にこの巨大なギャップがあります。 – Rena

.. ..あなたはudnerstandこれは100％の幅は、修復不可能であるため

は常に混乱あなたは100％の幅でそれを持つことはできませんが、プッシュすると100％を占めることはできません。

出典

2010-01-31 03:28:00

普通の流れと戦っているので、これだけではcssではできないと思います。要素は通常、お互いの上に積み重ねられ、ページを下って行く途中で動くように求めるのは、この仕組みではありません。

出典

2010-01-31 04:07:52 Rob

box4のCSSにはclear:both;というプロパティが必要です。それはトリックを行う必要があります。私はちょうどそれをテストし、あなたが望むことをします。

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
    clear:both; 
}

出典

2010-01-31 04:14:49

あなたはコンテナのbox4外を逃しました。下のスニペットをチェックすることができます。

#menu { 
 
    float: left; 
 
    width: 100px; 
 
    padding-left: 0px; 
 
} 
 

 
#menu ul { 
 
    margin: 0px; 
 
    padding: 10px; 
 
} 
 

 
#title { 
 
    margin-left: 100px; 
 
    border: 1px #F00 dashed; 
 
    height: 40px; 
 
    font-size: 20pt; 
 
} 
 

 
#title_text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-top: 5px; 
 
} 
 

 
#container { 
 
    margin-left: 100px; 
 
} 
 

 
.topbox { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
    margin-right: 2px; 
 
    margin: none; 
 
    border: 1px #F00 solid; 
 
} 
 

 
.topbox .title { 
 
    text-align: center; 
 
    border-bottom: 1px #000 solid; 
 
    padding-top: 1px; 
 
} 
 

 
.content { 
 
    padding: 2px; 
 
} 
 

 
#box4 { 
 
    border: 1px #000 solid; 
 
    width: 100%; 
 
} 
 

 
#box4 .title { 
 
    display: block; 
 
    border-right: none; 
 
    border-bottom: 1px #000 solid; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    text-align:center; 
 
    
 
} 
 

 
#box4 .content { 
 
    display: inline; 
 
}

<?xml version="1.0" encoding="UTF-8"?> 
 
    <!DOCTYPE html PUBLIC 
 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
     <head> 
 
      <title></title> 
 
      <link rel="stylesheet" href="css/main.css" /> 
 
     </head> 
 
     <body> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
       </ul> 
 
      </div> 
 
      <div id="title"> 
 
       <img src="img/logo.png" alt="logo" /> 
 
       <span id="title_text">Title</span> 
 
      </div> 
 
      <div id="container"> 
 
       <div id="box1" class="topbox"> 
 
        <div class="title">Box 1 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box2" class="topbox"> 
 
        <div class="title">Box 2 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box3" class="topbox"> 
 
        <div class="title">Box 3 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box4"> 
 
       <div class="title">Box 4 Title</div> 
 
       <div class="content">Content goes here<br />line break</div> 
 
      </div> 
 
      </div> 
 
      
 
     </body> 
 
    </html>

出典

2018-01-23 09:50:21

CSS Floatボーダーオーバーラップの問題

答えて

関連する問題