Jak dopasować wysokość dzioba do owinięcia wokół jego uniesionych dzieci

Question

Mam div owinięty wokół dwojga dzieci, jeden unosił się w lewo, a drugi w prawo. Chciałbym umieścić granicę i tło wokół dzieci, ale div ma 0 wysokości, ponieważ nie zmienia rozmiaru pasującego do dzieci.

Oto przykład jak to działa: http://jsfiddle.net/VVZ7j/17/

chcę czerwone tło, aby przejść całą drogę w dół. Próbowałem wysokości: auto, ale to nie zadziałało.

Każda pomoc zostanie doceniona, dzięki.

P.S. Nie chcę używać żadnego javascriptu, jeśli to możliwe.

Answer 1

Jest to typowy problem podczas pracy z elementami pływającymi. Istnieje kilka typowych rozwiązań, które mam sortowane według preferencji osobistych (pierwsza najlepszym rozwiązaniem):

1. U¿yj :: po elementu CSS pseudo. Jest to znane jako "poprawka" i działa IE8 i nowsze. Jeśli potrzebujesz kompatybilności z wcześniejszymi wersjami IE, this answer should help. Example.

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

2. Dodaj dwa pływaki do pojemnika z atrybutem CSS overflow: auto lub overflow: hidden. Jednak takie podejście może powodować problemy (np. Gdy etykieta narzędzi nakłada się na krawędzie elementu rodzica, pojawi się pasek przewijania). Example.

   <div style="overflow: auto"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

3. Dodaj ustawioną wysokość do elementu nadrzędnego. Example.

   <div style="height: 200px"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

4. Ustaw element nadrzędny jako zmienny. Example.

   <div style="float: left"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

5. Dodaj div po float z clear: both. Example.

   <div style="float: left"></div> 
   <div style="float: left"></div> 
   <div style="clear: both"></div> 
   

Answer 2

Dodaj overflow: hidden; do #wrap. To jest clear fix. Oto niektóre dokumenty o tym: http://positioniseverything.net/easyclearing.html

LE: Istnieje również wiele sposobów można to osiągnąć, w zależności od zgodnością przeglądarki:

1. Dodaj overflow: hidden do kontenera nadrzędnego.

#wrap { overflow: hidden; }

1. pomocą pseudo-element dodać clear: both.

#wrap:after { clear: both; content: ""; display: table;}

1. Najpowszechniej stosowanym tehnique jest dodanie dodatkowego jako ostatniego elementu nadrzędnego kontenera.

<div style="clear:both"></div>

I preferujących not używać 3rd jednego, jak dostać dodatkowe znaczniki HTML.

Answer 3

Spróbuj dodać overflow: hidden do swojego #wrapdiv.

Answer 4

Wystarczy dodać jeden więcej div z stylu clear: both przed zamknięciem zewnętrzna div znaczy tutaj "wrap"

--Sample code--

<div id="wrap"> 
    <div id="left"> 
     <p>some content at left</p> 
    </div> 
    <div id="right"> 
     <p>some content at right</p> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Answer 5

Przyszedłem, aby rozpocząć korzystanie z tego rozwiązania "micro-clearfix" od Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
} 

Wystarczy dodać, że do swojego CSS i unosił dowolnym elemencie, dodać klasę „cf” do owinięcia jakiegokolwiek dowolnego elementu, który unosił dzieci.