Kolor tła CSS nie działa

Ustawiam kolor tła zewnętrznego div na niebieski, ale nie jest on wyświetlany. Czemu?Kolor tła CSS nie działa

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>

Demo nim http://jsfiddle.net/4zjtp/

Źródło

2012-10-29 SamB

Spróbuj tak ..

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

Źródło

2012-10-29 09:01:21 Xavier

Teraz kiedy określić szerokość zapytania szablon i wydłużyć pytanie, tekst schodzi poniżej uczestników div. Jak mogę sprawić, by pozostał na tej samej linii? – SamB

Możesz użyć wyświetlacza : inline-block. – Xavier

które wydawały się nie działać. http://jsfiddle.net/4zjtp/15/ – SamB

Live demo ........... Hi teraz określić swoje div rodzic.question-template overflow:hidden;

.question-template{ 
overflow:hidden; 
}

Sposób drugi

teraz jasne rodzic

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

Źródło

2012-10-29 08:55:52

Dodaj overflow:auto do .question-template

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

Źródło

2012-10-29 08:57:52 mshsayem

To dlatego, że obie firmy elementów potomnych są płynął w lewo. Oznacza to, że pojemnik nie będzie rozciągał się do pełnej wysokości potrzebnej do umieszczenia elementów potomnych.

Aby rozwiązać ten problem trzeba dodać klasę clearfix takie jak to do CSS:

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

a następnie dodać klasę do kodu HTML tak:

<div class="question-template clearfix">

zobaczyć tutaj na dłużej info: http://css-tricks.com/snippets/css/clear-fix/

Źródło

2012-10-29 08:59:01 adamdougal

Należy zastosować wyczyszczenie pływaka na div jednostki głównej, aby upewnić się, że zajmuje on elementy wewnętrzne. Można wstawić <div style="clear:left;"></div> przed zamknięciem elementu nadrzędnego lub zastosować klasę przezroczystą w elemencie nadrzędnym.

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

Następnie wystarczy dodać klasę clearfix do div

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

Working Example

Źródło

2012-10-29 09:01:24

Kolor tła CSS nie działa

Odpowiedz

Powiązane problemy