Colore di sfondo CSS non funzionante

Ho impostato il colore di sfondo del div esterno su blu ma non è visualizzato. Perché?Colore di sfondo CSS non funzionante

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>

Una demo di esso http://jsfiddle.net/4zjtp/

fonte

2012-10-29 SamB

Prova come questo ..

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

fonte

2012-10-29 09:01:21 Xavier

Ora, quando ho specificare la larghezza della questione-modello e aumentare la lunghezza della questione, il testo scende sotto il div dei partecipanti Come posso farlo rimanere sulla stessa linea? – SamB

È possibile utilizzare la visualizzazione : blocco in linea. – Xavier

che non sembra funzionare. http://jsfiddle.net/4zjtp/15/ – SamB

Live demo ........... Hi ora definire la tua div gen.question-template overflow:hidden;

.question-template{ 
overflow:hidden; 
}

Metodo due

ormai chiaro il vostro genitore

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

fonte

2012-10-29 08:55:52

Aggiungi overflow:auto al .question-template

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

fonte

2012-10-29 08:57:52 mshsayem

E 'perché entrambi gli elementi figlio vengono galleggiare sinistra. Ciò significa che il contenitore non si estenderà per tutta l'altezza necessaria per contenere gli elementi figlio.

Per risolvere questo problema è necessario aggiungere una classe clearfix come questo per il vostro css:

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

E poi aggiungere la classe al vostro HTML in questo modo:

<div class="question-template clearfix">

Vedi qui per maggiori info: http://css-tricks.com/snippets/css/clear-fix/

fonte

2012-10-29 08:59:01 adamdougal

È necessario applicare un chiaro il galleggiante sul div padre per assicurarsi che esso occupa gli elementi interni. È possibile inserire uno <div style="clear:left;"></div> prima che il genitore si chiuda o applichi una classe di clearfix sul div padre.

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

Poi basta aggiungere la classe clearfix al div genitore

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

Working Example

fonte

2012-10-29 09:01:24

Colore di sfondo CSS non funzionante

risposta

Problemi correlati