0

重複の可能性：
コンテンツがdivの外に表示されるのはなぜですか？

divの背景スタイルがdiv内にネストされたすべてをカバーしていないという問題があります。

これが私が話していることを正確に示すためのjsfiddleです

ddg-corner-statements絶対的な高さを設定せずに、divの灰色の背景スタイルをdiv内のすべてに適用するにはどうすればよいですか？

4

5 に答える 5

3

これは、フロートを操作する際によくある問題です。一般的な解決策がいくつかあります。

  1. float の後に div を追加しclear: bothます。例。

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

  2. CSS 属性を使用して、2 つのフロートをコンテナーに追加しますoverflow: auto。例。

    <div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  3. 親要素を float にします。例。

    <div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  4. :after CSS 疑似要素を使用します。例。

    .parentelement:after {
    content: ".";
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}

  5. 親要素に設定された高さを追加します。例。

    <div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

個人的には、単純さとセマンティクスのためにオプション 2 を使用します。

コードの更新版はこちらでご覧いただけます。

于 2012-10-12T13:15:33.073 に答える
2

すべてに灰色の背景色を適用したいと思います: My Fiddle

次のようにフロートをクリアします。

<div style="clear: both;"></div>
<div id="view-all-statements"><a href="ddg-statements.html">View All Statements →&lt;/a></div>
于 2012-10-12T13:14:24.433 に答える
1

灰色の背景はイメージのようです。垂直方向に繰り返してみて、何が起こるか見てみましょう。

于 2012-10-12T13:15:53.097 に答える
1

これはあなたの問題を解決します：

> .ddg-corner-statements {
>     padding: 10px 15px 1px;
>     background: url("../images/bg_story_resources_bot.gif") repeat-x scroll left bottom transparent;
>     display: inline-block; }
于 2012-10-12T13:16:33.720 に答える
1

子要素がフローティングされ、フローから除外されているため、背景は適用されていません。

.ddg-corner-sidebar ul li a {
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #F8F8F8;
    color: #333333;
    display: block;
    float: left;
    padding: 5px 0 9px;
    width: 100%;
}

float:left;背景を削除すると、期待どおりに動作します。

float:leftが必要な場合は、フロートをクリアする必要があります。

于 2012-10-12T13:18:38.860 に答える