Float Tworzy zachodzące na siebie dywizje

Mam dwa divy (jeden wewnątrz drugiego) i napotykam na problem, gdy unoszę jeden wewnątrz do "lewego". Problem polega na tym, że zewnętrzny div nie powiększa swojej wysokości, aby dopasować tekst do wnętrza div. Ponieważ jest to prawdopodobnie dość mylące, spróbuję wyjaśnić to za pomocą jakiegoś kodu.Float Tworzy zachodzące na siebie dywizje

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

raczej nadzieję, że podczas badania to faktycznie pokazuje mój problem jak ja nie miałem okazję przetestować to. Mój prawdziwy kod ma więcej właściwości, które w razie potrzeby przedstawię.

Źródło

2009-06-21 PF1

Musisz użyć clear-fix. Wstaw następujące elementy po pływającym div i wewnątrz zawierającego div.

<div class="clear"></div>

i dodaj następujący styl:

.clear { clear:both; }

Przykład:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

Źródło

2009-06-21 03:49:03 Sampson

Dzięki Jonathan: To działało świetnie! – PF1

Ty geniusz :) jego praca –

To nie jest poprawka. Jest po prostu jasne. Musisz tylko wyczyścić pływające :) –

(po raz trzeci dzisiaj :-)) dać zewnętrzny div overflow: hidden;
i szerokość.

Źródło

2009-06-21 03:49:55

Naprawdę? Bardzo przepraszam za to, naprawdę. Myślę, że muszę popracować nad zmianą zapytań, by lepiej wyrazić, co inni ludzie nazywają tym samym problemem. – PF1

... lub auto –

Dodanie szerokości do elementu w celu zwiększenia wysokości kodu sprawia, że kod CSS jest trudny do odczytania, wątpię, czy jest to rozsądne rozwiązanie. Zoom: 1 rozwiązanie wydaje się lepsze, ale prawdopodobnie nie będzie poprawne css w3c. Przepełnienie: ukryte jest również dobre rozwiązanie, ale sprawia, że twoje css również jest trudne do odczytania, ponieważ nie chodzi o ukrywanie zawartości, ale również o zwiększenie jej rozmiaru. – Michiel

Jeśli nie chcesz dodać dodatkowe znaczniki do kodu HTML lub dodać szerokości do zewnętrznej div, można użyć:

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

Źródło

2009-06-21 11:45:12 Emily

Myślałem, że przepełnienie: ukryte działa również w IE6? – alex

Nie. Aby usunąć float dla IE6, musisz wywołać hasLayout. Odbywa się to poprzez nadanie elementowi położenia, unoszenia się, wyświetlania, szerokości, wysokości lub powiększenia. Podawanie szerokości lub wysokości jest najczęstszym sposobem wywołania metody hasLayout, ale czasami nie chcesz określać wymiaru, a zoom jest najbardziej przejrzysty. Zobacz hasLayout.net, aby uzyskać więcej informacji. – Emily

Ah - Dodaję wyświetlacz: blok do ogólnie wszystkiego, co zawiera elementy pływające. – alex

Może poręczny, aby pamiętać, że istnieje również dobrze znać kod clearfix od positioniseverything napisany specjalnie dla tego problemu i prawdopodobnie najmocniejszy i najłatwiejszy do zastosowania w każdej sytuacji. CSS wygląda następująco:

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

W celu wykorzystania go w danej sytuacji byłoby wykonać następujące czynności:

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

Źródło

2009-06-21 17:47:18 Michiel

Wysokość: 1% rozwiązał mój cały problem. Nie wiem, dlaczego. Czy możesz wyjaśnić, co robi w kontekście serii pływających elementów z 2 lub więcej nie pływającymi elementami na ogonie? – Emanegux

Chociaż rozwiązania powyżej powinny działać, ja figura to warto zwrócić uwagę, że nie ma jednego magiczna sztuczka, której jeszcze nie widziałem (w tym wątku).

Po prostu przenieś # div1 w lewo. Kiedy unosisz element nadrzędny, to automatycznie oczyści element dziecka - naprawdę przydatny, naprawdę. Możesz zbudować cały układ unoszonych stosów, a potem na końcu mieć jedno ostateczne wyczyszczenie, które będzie dość niezawodne.

Źródło

2009-06-22 08:26:18

Niestety pływaki bardzo uzależniają. Najlepiej używać ich oszczędnie i spryskać dziwny przelew: ukryty; – GlennG

Float Tworzy zachodzące na siebie dywizje

Odpowiedz

Powiązane problemy