web-dev-qa-db-ja.com

HTML / CSSでdivラッピング記事と脇に背景色を正しく課す方法は？

articleとasideのみでカバーされる部分の背景色を指定したいので、asideの高さがarticleと同じであるという印象を与えることができます（基本的に、asideとdivの両方をラップするために同じ背景色を指定します） asideおよびarticle）

       <div style="background-color:#cccccc" class="clear_fix">
         <p> This is where the container starts !!!</p>
         <p> Why the div stops here ???!!!!</p>
         <article>
            <h2> Meanwhile, Let's learn about Tesla </h2>
            <p>Tesla's achievements and his abilities as a showman</p>
         </article>
         <aside>
            <h2> Brand-new and Used cars </h2>
            <p> Buy your first car starting from 0.99 $.</p>
         </aside>
      </div>

上記のタグに関連するstyle.cssは次のとおりです。

article {
width:716px;
background-color:#87ceeb;
box-shadow: 0px 0px 4px 4px #a9a9a9;
padding-top:20px;
float:left;
margin-top: 4px;
margin-bottom: 4px;
}
aside {
width:240px;
float:left;
padding-top:20px;
background-color:#fff5dd;
margin-top:4px;
margin-left:4px;
box-shadow:0px 0px 4px 4px #a9a9a9;
}
.clear_fix {
clear:both;
}

しかし、私が得たのは、divの背景色は最初の2つのpタグにのみ影響するということです。

enter image description here

明らかに、これは私がすべてをdivでラップすることによって意図したことではありません。

私の場合のdivの背景色がarticle and theaside`より下に拡張されない理由を知っていますか？

ありがとう。

htmlcssbackground-color
4
Debugger

<article>要素と<aside>要素をフロートさせたため、これらは親<div>のフローから外れています。

親要素のスタイルに、次のプロパティを追加します：overflow: autoまたはoverflow: hidden。

<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">

これが機能する理由

overflowプロパティがトリックを実行する理由は、CSSブロックフォーマットモデルがどのように機能するかに起因します。

具体的には、関連する仕様は次のとおりです。
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

次のHTMLスニペットについて考えてみます。

<div class="wrap">
    <p>Some text...</p>
    <div class="floated">Floated text</div>
</div>

基本ケースでは、これらの要素はすべて通常のフロー（フロートなし）であり、ルート要素によって定義された「ブロックフォーマットコンテキスト」内でフォーマットされます。ページの。したがって、それらは基本的にページの幅を埋め、ブロック要素であるため、上下に積み重ねられます。

ケース1を考えてみましょう。ここでは、.floatedをフロートさせます。フロート要素は通常のフローではなくなり、親コンテナの左端に配置され、フロート要素に最も近いブロックレベル要素である段落の下部に隣接します。

親要素の境界線は、通常のフローの子要素を囲みます。これが、フロート要素が突き出ている理由です（親コンテナの高さを決定する通常のフロー要素をフォーマットするとき、フロート要素は無視されることに注意してください）。

さて、ケース2で、.wrapをフロートさせましょう。この場合、親要素は、<p>と.floatedの両方の子を含むコンテンツに合わせて縮小されます。これは、div.wrapが新しいブロックフォーマットコンテキストを確立し、CSSルールで指定されているように、ボックスのすべての端を囲む必要があるためです。含まれていること（フロートを含む）。

最後に、ケース3では、通常のフロー（フロートではない）のoverflow: hiddenで.wrapを宣言します。 overflowをvisible以外の値に設定すると、新しいブロックフォーマットコンテキストが開始されます。そのため、.wrapは引き続きページの全幅を拡張し、フロートされた子要素のすべてのエッジも含まれるようになったため、境界線はフロートされた要素を囲みます。

デモフィドル： http://jsfiddle.net/audetwebdesign/VXL4B/

11
Marc Audet

おそらくあなたのclear_fixクラスはその仕事をしていません。

これをチェックしてください [〜＃〜] fiddle [〜＃〜] これはclearfixクラスを切り替えるだけですコンテナ要素に。 clearfixが設定されていない場合、それはあなたが経験しているものとよく似ています。

このcssをclearfixクラスに使用します。

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
0
JAM