Comment correctement imposer une couleur d'arrière-plan à un div emballage de l'article et de côté en HTML/CSS?

Je veux donner une couleur de fond pour la partie couverte par la article et la aside seulement, je ne peux donc donner l'impression que le aside a la même hauteur que le article ( essentiellement en donnant la même couleur de fond pour le aside et la div d'emballage à la fois aside et 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>

Ici est le style.css liés aux balises ci-dessus.

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;
}

Mais ce que je reçois, c'est que la couleur de fond de la div affecte uniquement les deux premiers p balises.

Comment correctement imposer une couleur d'arrière-plan à un div emballage de l'article et de côté en HTML/CSS?

Évidemment, ce n'est pas ce que j'ai l'intention de faire en enveloppant le tout avec une div.

Avez-vous une idée de pourquoi le div couleur d'arrière-plan dans mon cas ne s'étend pas au-dessous de la article and thede côté"?

Grâce.

Quelque chose n'a pas de sens, est-il une feuille de style? Je me pose des questions sur les flotteurs et le positionnement absolu...
ouais. peut-on voir le CSS?
Bien sûr, je vais modifier la page d'une seconde!

OriginalL'auteur Debugger | 2013-05-16

11

Depuis que vous avez émis l' <article> et la <aside> éléments, ils sont hors de la circulation de la société mère <div>.

Le style de l'élément parent, ajouter la propriété suivante: overflow: auto ou overflow: hidden.
```
<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">
```
Pourquoi Cela Fonctionne

La raison pour laquelle le overflow bien fait le truc provient de ce que le CSS du bloc de mise en forme est un modèle qui fonctionne.

Plus précisément, la spécification correspondante est:

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Considérer le code HTML suivant:
```
<div class="wrap">
    <p>Some text...</p>
    <div class="floated">Floated text</div>
</div>
```
Dans le Base de Cas, tous ces éléments sont dans le flux normal (pas de flotte) et sont mises en forme dans le "bloc de mise en forme de contexte", défini par l'élément racine de la page. Donc, en gros, ils se remplir la largeur de la page et, étant des éléments de bloc, sont empilés les uns sur les autres.

Envisager Cas 1, dans laquelle nous flottons .floated. Le flottait élément n'est plus dans le flux normal et il est bien placé pour le bord gauche du conteneur parent et adjacent au bas de ce paragraphe, qui est la plus proche au niveau du bloc de l'élément à la flottait élément.

La frontière de l'élément parent s'enroule autour de l'écoulement normal de l'enfant des éléments qui est pourquoi les flottait éléments en saillie (rappelez-vous, la flottait élément est ignoré lors du formatage de la circulation normale des éléments qui détermine la hauteur du conteneur parent).

Maintenant, dans Cas 2, laissez-la flotter .wrap. Dans ce cas, le parent de l'élément réduit à ajuster le contenu, y compris à la fois la <p> ET la .floated enfant. C'est parce que div.wrap a maintenant établi un nouveau bloc de mise en forme contexte et tel que spécifié par les règles CSS, doivent joint tous les bords des cases qu'il contient (y compris les flotteurs).

Enfin, dans Cas 3, nous déclarons overflow: hidden sur .wrap dans le flux normal (pas flotté). Réglage overflow à une valeur autre que visible commence un nouveau bloc de mise en forme de contexte. En tant que tel, .wrap toujours s'étend sur toute la largeur de la page, ET à présent, il contient également tous les bords du flottaient des éléments d'enfant, de sorte que la frontière s'enroule autour de la flottait élément.

Démo Violon: http://jsfiddle.net/audetwebdesign/VXL4B/

Merci pour votre réponse. Il a résolu le problème ! Mais je ne comprends pas pourquoi cela être résolu de cette façon ? Pouvez-vous m'expliquer s'il vous plaît ?
- Je prendre cela pour acquis, mais laissez-moi regarder dans le CSS pour que je puisse poster un décent et utile de répondre.

OriginalL'auteur Marc Audet

C'est probablement parce que votre clear_fix classe n'est pas de faire son travail.

Découvrez ce VIOLON qui enclenche le clearfix classe sur l'élément conteneur. Lorsque clearfix n'est pas défini, il ressemble beaucoup à ce que vous vivez.

Utiliser css pour la clearfix classe:

.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%;
}

OriginalL'auteur JAM

Vous devez vous connecter pour publier un commentaire.

Pourquoi Cela Fonctionne