Spraw, aby dziecko było widoczne poza przepełnieniem: Ukryty rodzic

W CSS overflow:hidden jest ustawiony na kontenerach nadrzędnych, aby umożliwić im rozszerzanie się wraz z wysokością ich pływających dzieci.

Ale ma również inną ciekawą funkcję w połączeniu z margin: auto...

Jeśli poprzednie rodzeństwo jest elementem pływającym, to faktycznie będzie się z nim zestawiać. Oznacza to, że jeśli rodzeństwo jest float:left, to kontener z float:none overflow:hidden pojawi się po prawej stronie rodzeństwa, bez znaku nowego wiersza - tak, jakby unosił się w normalnym przepływie. Jeśli poprzedni rodzeństwo to float:right wtedy Pojemnik pojawi się po lewej stronie rodzeństwa. Zmiana rozmiaru tego kontenera dokĹ 'adnie ukaĺźy go na Ĺ" rodku pomiÄ ™ dzy elementami uĹźywajÄ ... cymi siÄ™. Powiedzmy, że jeśli masz dwoje poprzednich rodzeństwa, jedno float:left drugie float:right, kontener pojawi się pośrodku pomiędzy tymi dwoma.

Oto problem...

Jak utrzymać taki układ bez maskowania dzieci?

Googling all over the web gives me ways on jak clear:both i rozwinąć kontener... ale nie mogę znaleźć alternatywnego rozwiązania dla utrzymania lewego / prawego poprzedniego-centrowania dziecka. Jeśli utworzysz kontener overflow:visible, to nagle kontener zignoruje przepływ układu elementów pływających i pojawi się warstwowo na wierzchu elementu pływającego.

Więc pytanie :

Muszę mieć kontener overflow:hidden aby zachować układ...

Jak mogę sprawić, by dzieci nie były zamaskowane? Muszę mieć dziecko. całkowicie umieszczony w stosunku do rodzica na zewnątrz pojemnika.

Lub

Jak mogę overflow:visible umieścić dziecko w stosunku do rodzica poza pojemnikiem... Jednak zachować rodzeństwo float-like-layout-flow?

Author: Praveen, 2010-08-02
Source

4 answers

Możesz użyć clearfix do "zachowania układu" w ten sam sposób, w jaki robi to overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

Dodaj class="clearfix" klasę do rodzica i usuń overflow: hidden;

 70
Author: Frexuz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-11 17:16:15

Żadna z zamieszczonych odpowiedzi nie zadziałała dla mnie. Ustawienie position: absolute dla elementu potomnego zadziałało.

 10
Author: reflexiv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-02 16:41:09

To jest stare pytanie, ale sam się z nim spotkałem.

Mam semi-rozwiązania, które działają sytuacyjnie na pierwsze pytanie ("Dzieci widoczne w przepełnieniu:Ukryty rodzic")

Jeśli parent div nie musi być position: relative, po prostu ustaw style potomne na visibility:visible.

Jeśli div rodzica musi być position: relative, jedynym sposobem, jaki znalazłem, aby pokazać dzieciom, było position: fixed. To działało dla mnie w mojej sytuacji na szczęście wystarczająco, ale ja wyobrażam sobie, że to nie zadziała u innych.

Oto gówniany przykład po prostu opublikuj w pliku html, aby wyświetlić. 

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>
 7
Author: Thomas Davis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-26 09:15:43

Dla innych, jeśli clearfix nie rozwiąże tego za ciebie, Dodaj marginesy do nie-pływającego rodzeństwa, które są / są takie same jak szerokość(y) pływającego rodzeństwa(ów).

 1
Author: Walf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-29 05:57:25