CSS-Hintergrundfarbe funktioniert nicht

Ich setze die Hintergrundfarbe des äußeren div zu blau, aber es wird nicht angezeigt. Warum?CSS-Hintergrundfarbe funktioniert nicht

CSS

.question-template { 
    width: auto; 
    height: auto; 
    background-color: blue; 
} 
.question { 
    float: left; 
    margin: 10px; 
} 
.participants { 
    background-color: green; 
    float: left; 
    margin: 10px; 
}

HTML

<body> 
<div class="question-template"> 
    <div class="participants">234</div> 
    <div class="question">Some lorem ipsum text</div> 
</div> 
</body>

Eine Demo davon http://jsfiddle.net/4zjtp/

Quelle

2012-10-29 SamB

wie die Sie interessieren ..

.question-template { 
    width: auto; 
    height: auto; 
    background-color: blue; 
    overflow:auto; 
}

Quelle

2012-10-29 09:01:21 Xavier

Nun, wenn ich die Breite der Frage Vorlage angeben und die Länge der Frage erhöhen, um den Text geht unter die Teilnehmer div. Wie kann ich es auf der gleichen Linie bleiben lassen? – SamB

Sie können Display: Inline-Block verwenden. – Xavier

das schien nicht zu funktionieren. http://jsfiddle.net/4zjtp/15/ – SamB

Live demo ........... Hallo jetzt definieren Sie Ihre übergeordnete div.question-template overflow:hidden;

.question-template{ 
overflow:hidden; 
}

Methode zwei

jetzt klar Ihre Eltern

Css

.clr{ 
clear:both; 
}

HTML

<div class="question-template"> 
<div class="participants">234</div> 
<div class="question">Some lorem ipsum text</div> 
    <div class="clr"></div> 
</div>

Live demo

Quelle

2012-10-29 08:55:52

hinzufügen overflow:auto zu .question-template

http://jsfiddle.net/4zjtp/2/

Quelle

2012-10-29 08:57:52 mshsayem

Es ist, weil beide Ihr Kind Elemente links schwebte werden. Dies bedeutet, dass sich der Container nicht auf die volle Höhe ausdehnt, die für die untergeordneten Elemente erforderlich ist.

das Sie lösen müssen eine clearfix Klasse wie diese zu Ihrem CSS hinzuzufügen:

<div class="question-template clearfix">

Sehen Sie hier für mehr: wie diese

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

Und dann fügen Sie die Klasse zu Ihrem HTML Info: http://css-tricks.com/snippets/css/clear-fix/

Quelle

2012-10-29 08:59:01 adamdougal

Sie müssen den Float auf dem übergeordneten div löschen, um sicherzustellen, dass es die inneren Elemente belegt. Sie können entweder <div style="clear:left;"></div> einfügen, bevor das übergeordnete Element geschlossen wird, oder eine Clearfix-Klasse auf das übergeordnete div anwenden.

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

Dann fügen Sie einfach die clearfix Klasse an die Mutter div

...  
<div class="question-template clearfix"> 
...

Working Example

Quelle

2012-10-29 09:01:24

CSS-Hintergrundfarbe funktioniert nicht

Antwort

Verwandte Themen