div Hintergrundfarbe wird nicht füllen die div

Question

Aus irgendeinem Grund kann ich nicht für die Lüge von mir herausfinden, warum die Hintergrundfarbe eines div nicht füllt. Ich habe 3 Bilder im Div. aber die Farbe kommt nur ein wenig herunter. Ich kann keinen vorherigen Beitrag finden, der mir die Antwort gibt.

#RevWrapper { 
 
\t clear: both; 
 
\t margin: auto; 
 
\t max-width: 1232px; 
 
\t display: block; 
 
\t padding-left: calc((100% - 1232px)/2); 
 
\t padding-right: calc((100% - 1232px)/2); 
 
\t background-color: #006666; 
 
\t padding-bottom: 2%; 
 
} 
 
#rev1 { 
 
\t clear: both; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev2 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev3 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
.revimagecenter {  
 
    display: block; 
 
\t width: 85%; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
}

<div id="RevWrapper"> 
 
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter"> 
 
    </div> 
 
</div>

Answer 1

, die auf den Schwimmern fällig - sie umgebenden Mutter Elemente nicht "gedeckt" werden. In overflow: auto; an den Wrapper um dieses Verhalten zu ändern:

#RevWrapper { 
 
\t clear: both; 
 
\t margin: auto; 
 
\t max-width: 1232px; 
 
\t display: block; 
 
\t padding-left: calc((100% - 1232px)/2); 
 
\t padding-right: calc((100% - 1232px)/2); 
 
\t background-color: #006666; 
 
\t padding-bottom: 2%; 
 
    overflow: auto; 
 
} 
 
#rev1 { 
 
\t clear: both; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev2 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
#rev3 { 
 
\t clear: none; 
 
\t float: left; 
 
\t width: 33.3%; 
 
\t display: block; 
 
\t padding-bottom: 2%; 
 
\t padding-top: 2%; 
 
} 
 
.revimagecenter {  
 
    display: block; 
 
\t width: 85%; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
}

<div id="RevWrapper"> 
 
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter"> 
 
    </div> 
 
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter"> 
 
    </div> 
 
</div>

Answer 2

Es ist, weil Sie float verwendet haben. In diesem Fall entfernen Sie float und clear von allen und anstatt float zu verwenden, können Sie margin-left für zweite und dritte Divs versuchen.

Answer 3

#RevWrapper { 
    clear: both; 
    margin: auto; 
    max-width: 1232px; 
    display: block; 
    padding-left: calc((100% - 1232px)/2); 
    padding-right: calc((100% - 1232px)/2); 
    background-color: #006666; 
    padding-bottom: 2%; 
} 
#rev1 { 
    clear: both; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
#rev2 { 
    clear: none; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
#rev3 { 
    clear: none; 
    float: left; 
    width: 33.3%; 
    display: block; 
} 
.revimagecenter {  
    display: block; 
    width: 85%; 
    margin-left: auto; 
    margin-right: auto 
} 

Remove the padding. 

Answer 4

Fügen Sie <div style="clear:both;"></div> als das letzte div in RevWrapper hinzu.