0

こんにちは Stackoverflow ユーザー...

私は本当にクールなスタイルをしようとしているこのウェブサイトを持っています.

http://kebax.dk/ブログ

ご覧のとおり、私の問題は、「境界線」の最後の部分が最後の 2 つの div をカバーしていないことです。

Div の構造は次のとおりです。

<div id="blog">
    <div id="bloghead">
        #Blog headline
    </div>
    <div id="blogbody">
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
        <p>Test tekst!!</p>
    </div>
    <div id="blogcreditsleft">
        Written by: Kristian
    </div>
    <div id="blogcreditsright"><?php echo date("Y-m-d") ?></div>
</div>

そして、これがその背後にあるCSSです（私のスタイルシートもチェックアウトできます）：

    #blog {
        .rounded();
        left:65px;
        position:relative;
        width:520px;
        margin-left:auto;
        margin-right:auto;
        padding:5px;
        background:#052507;
    }

    #bloghead {
        color:#000000;
        background:#2BAC2B;
        padding:5px;
        border-bottom:1px solid #052507;
        font-size:14pt;
    }
    #blogbody {
        color:#000000;
        background:#42E64F;
        padding:5px;
        height:auto;
        overflow:auto;
        min-height:300px;
    }
    #blogcreditsleft, #blogcreditsright {
        color:#000000;
        padding:5px;
        width:250px;
        .gradientVBottomCenter();
    }
    #blogcreditsleft {
        float:left;
    }
    #blogcreditsright {
        float:right;
        text-align:right;
    }

私がそれを機能させる唯一の方法は、を設定し、それを「中心」の中心にプッシュするようにposition:absolute追加left:65pxすることです:)絶対位置。

私はそれが行方不明の何かclear:bothだと思っていますが、それを修正する方法がわかりません...

誰でも助けることができますか？

編集：国境...

4

2 に答える 2

3

あなたが何を話しているのかを理解するために、私はあなたのサイトをほぼ 1 分間じっと見つめなければなりませんでした。他の人も同じことをしているのではないかと思います。その境界は非常に微妙です (見逃しやすい)。

これを修正する最も簡単な方法は、to "clear the float"overflow: hiddenを追加することです。#blog

（またはoverflow: auto、しかし過去の経験から、より多くの賛成票が に行くことを教えてくれましたhidden）

于 2011-02-21T21:05:56.143 に答える
1

フローティング要素がコンテナ div をエスケープしています。

「blogcreditsright」の後に、もう 1 つのブロック レベル要素をマークアップに追加します。

<div class='clear'></div>

CSS

.clear{
    clear:both;
}
于 2011-02-21T21:06:26.757 に答える