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?
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;
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.
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>
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).
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