Div background-color erstreckt sich nicht auf untergeordnete divs

Question

Ich habe ein Container div mit mehreren Child divs in diesem. Das Eltern-Div hat eine Hintergrundfarbe, dies scheint sich jedoch nicht auf die letzten Kind-Divs auszudehnen. Bitte beachten Sie folgenden Code:

http://codepen.io/tombarton/pen/aNaGGa

<div class="container"> 
    <ul> 
     <li> 
      ... 
     </li> 
    </ul> 
    <hr> 
    <div class="checkout"> 
     <div class="left"> 
          ... 
     </div> 
     <div class="right"> 
      <div class="button"> 
           ... 
      </div> 
     </div> 
    </div> 
</div> 

CSS

body { 
    background-color: #F8F8F8; 
    font-family: 'Open Sans', sans-serif; 
    text-transform: uppercase; 
} 

.container { 
    display: block; 
    max-width: 600px; 
    height: 100%; 
    margin: 20vh auto; 
    padding: 0 3%; 
    background-color: white; 
    text-align: justify; 
} 

ul { 
    margin: 0; 
    padding: 0; 
} 

li { 
    position: relative; 
    list-style-type: none; 
    margin: 20px auto; 
} 

.checkout { 
    display: block; 
    margin-top: 10px; 
    width: 50%; 
    float: right; 
} 

.left { 
    display: block; 
    width: 55%; 
    float: left; 
    line-height: 40px; 
    text-align: right; 
} 

.right { 
    display: block; 
    width: 40%; 
    margin: auto; 
    float: right; 
    cursor: pointer; 
} 

Ich vermute, dies auf die Tatsache zurückzuführen ist, dass letzten beiden divs haben keinen Inhalt, aber ich bin nicht 100% sicher. Hat jemand irgendwelche Ideen?

Danke.

Answer 1

Sie müssen <div style="clear:both;"></div> nach dem letzten floating Elemente innerhalb des übergeordneten div hinzuzufügen. diese

Ihre neuen Codes wird:

body { 
 
    background-color: #F8F8F8; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-transform: uppercase; 
 
} 
 

 
.container { 
 
    display: block; 
 
    max-width: 600px; 
 
    height: 100%; 
 
    margin: 20vh auto; 
 
    padding: 0 3%; 
 
    background-color: green; 
 
    text-align: justify; 
 
} 
 

 
h1 { 
 
    font-size: 1em; 
 
    letter-spacing: 1px; 
 
    font-weight: 700; 
 
    padding-top: 20px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.inline-row { 
 
    display: inline-block; 
 
    height: 56px; 
 
    vertical-align: top; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    margin: 20px auto; 
 
} 
 

 
.image-container { 
 
    width: 24%; 
 
    img { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
} 
 

 
.product { 
 
    width: 58%; 
 

 
    h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 28px; 
 
    vertical-align: top; 
 
    } 
 
    p { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 28px; 
 
    } 
 
} 
 

 
.cost { 
 
    width: 13%; 
 
    text-align: right; 
 
    p { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 28px; 
 
    } 
 
} 
 

 
.delete { 
 
    float: right; 
 
    width: 3%; 
 
    text-align: right; 
 
    font-size: 0.7em; 
 
    font-weight: 700; 
 
    line-height: 28px; 
 
    cursor: pointer; 
 
} 
 

 
hr { 
 
margin-top: 30px; 
 
} 
 

 
.checkout { 
 
    display: block; 
 
    margin-top: 10px; 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
.left { 
 
    display: block; 
 
    width: 55%; 
 
    float: left; 
 
    line-height: 40px; 
 
    text-align: right; 
 
} 
 

 
.right { 
 
    display: block; 
 
    width: 40%; 
 
    margin: auto; 
 
    float: right; 
 
    cursor: pointer; 
 
} 
 

 
.button { 
 
    height: 40px; 
 
    width: 100%; 
 
    border: 1px black solid; 
 
    border-radius: 20px; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-weight: 700; 
 
} 
 
.clear{ 
 
    clear:both; 
 
}

<div class="container"> 
 
    <h1>Shopping Cart</h1> 
 
    <ul> 
 
    <li> 
 
     <div class="inline-row image-container"> 
 
     <img src="http://placekitten.com/150/56"> 
 
     </div> 
 
     <article class="inline-row product"> 
 
     <h2>barolo.</h2> 
 
     <p>barolo di castiglione falletto</p> 
 
     </article> 
 
     <div class="inline-row cost"><p>39.99 EUR</p></div> 
 
     <div class="inline-row delete">X</div> 
 
    </li> 
 
    <li> 
 
     <div class="inline-row image-container"> 
 
     <img src="http://placekitten.com/150/56"> 
 
     </div> 
 
     <article class="inline-row product"> 
 
     <h2>barolo.</h2> 
 
     <p>barolo di castiglione falletto</p> 
 
     </article> 
 
     <div class="inline-row cost"><p>39.99 EUR</p></div> 
 
     <div class="inline-row delete">X</div> 
 
    </li> 
 
    <li> 
 
     <div class="inline-row image-container"> 
 
     <img src="http://placekitten.com/150/56"> 
 
     </div> 
 
     <article class="inline-row product"> 
 
     <h2>barolo.</h2> 
 
     <p>barolo di castiglione falletto</p> 
 
     </article> 
 
     <div class="inline-row cost"><p>39.99 EUR</p></div> 
 
     <div class="inline-row delete">X</div> 
 
    </li> 
 
    </ul> 
 

 
    <hr> 
 
    
 
    <div class="checkout"> 
 
    <div class="left">TOTAL 148.98 EUR</div> 
 
    <div class="right"> 
 
     <div class="right button">CHECKOUT</div> 
 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

Beispiel hier: https://jsfiddle.net/22L7engy/

Answer 2

Elternteil div Stile Kind div anwenden entweder

> float:left 

von Kind entfernen oder Schwimmer hinzufügen: links an der Mutter div. hoffe, das wird dein Problem lösen.

Answer 3

.container { 
    display: block; 
    max-width: 600px; 
    height: 100%; 
    margin: 20vh auto; 
    padding: 0 3%; 
    background-color: white; 
    text-align: justify; 

    overflow: auto; 
} 

Ihre Kasse schwimmt, so dass es nicht korrekt gilt, wie der Behälter verhält

Answer 4

Entweder in Ihrem CSS oder inline, weiß der Code wie:

#adiv { 
background-color: #F8F8F8; 
} 

#anotherdiv { 
background-color: #F8F8F8; 
} 

Stellen Sie in HTML sicher, dass ca ll jedes Div zu ihrem jeweiligen CSS.