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

Question

ページの左側にメニューをフロートさせようとしていますが、メニューが下のコンテンツに到達するのに十分な大きさになると、Firefox はコンテンツを本来のとおりにバンプします... 境界線を除いて。

以下は、いくつかの項目を含むスクリーンショットです。

そして、いくつかのアイテムを持つ別の

"Box 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">
        <頭>
            <タイトル></タイトル>
            <link rel="stylesheet" href="css/main.css" />
        </head>
        <本体>
            <div id="メニュー">
                <ul>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                </ul>
            </div>
            <div id="タイトル">
                <img src="img/logo.png" alt="ロゴ" />
                <span id="title_text">タイトル</span>
            </div>
            <div id="コンテナ">
                <div id="box1" class="トップボックス">
                    <div class="title">ボックス 1 タイトル</div>
                    <div class="content">ここにコンテンツが入ります</div>
                </div>
                <div id="box2" class="トップボックス">
                    <div class="title">ボックス 2 タイトル</div>
                    <div class="content">ここにコンテンツが入ります</div>
                </div>
                <div id="box3" クラス="トップボックス">
                    <div class="title">ボックス 3 タイトル</div>
                    <div class="content">ここにコンテンツが入ります</div>
                </div>
            </div>
            <div id="box4">
                <div class="title">ボックス 4 タイトル</div>
                <div class="content">ここにコンテンツが入ります<br />改行</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;
}

score 2 · Accepted Answer

普通の流れと戦っているのでcssだけでは無理だと思います。通常、要素は互いに積み重なっており、ページを下に移動するときに邪魔にならないように移動するように要求することは、これがどのように機能するかではありません。

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

#box4 ルールを次のように更新することで修正できます。

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

長い sidenav css の下にある #box4 を編集します。

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

score 0 · Accepted Answer

#box4 を左に浮かせることができます..

ただし、幅が 100% になるわけではありません。

100% 幅は常に何かを台無しにするので、これは修正できません.. 100% 幅にすることはできませんが、押したときに 100% を占有することはできません...

score 0 · Accepted Answer

「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>

乾杯！！！

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

6 に答える 6

Related

Reference