CSS: výška divu obsahujúceho divs - html, css, css3

Mám veľmi jednoduchý oddiel, ktorý obsahuje niektoré zvyšujúce sa oddiely:

<div id="group1" style="padding: 10px">
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
</div>

Teraz mám nejaké problémy týkajúce sa výškygroup1. V podstate čalúnenie dna nefunguje, pretože výška skupiny 1 nie je dynamická. V nástrojoch dev to ukazuje, že je to vždy 21px. v závislosti od veľkosti okna prehliadača potrebujú vnútorné oddiely viac miesta. Skúšal som niekoľko kombinácií výšky: auto a min. Výška, ale nič nefungovalo.

Naozaj musím vypočítať výšku v závislosti od veľkosti okna prehliadača? Malo by byť niečo pohodlnejšie!

Akákoľvek pomoc sa veľmi cení! Vďaka

odpovede:

<div id="group1" style="padding: 10px; width:100%; float:left;">
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
</div>

Keď prvok používa vlastnosť float Nemá to vplyv na veľkosť rodiča, iba sa tam vznáša, dokonca aj na vložený prvok nemá vplyv na rodiča.

Takže vždy, keď použijete takéto divy, je potrebné vyčistiť plávajúci kontext.

Existuje niekoľko spôsobov, ako to dosiahnuť:

• Použite div s clear: both; po plávajúcom prvku v rámci rodiča
• pridať overflow: hidden; na rodičovský prvok
• pridať float sám rodičovi, ale to by mohlo spôsobiť problém s výškou prvkov vyšších úrovní.

Môžete tiež použiť:

<div id="group1" style="padding: 10px; width:100%; display:table;">
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
<div style="width: 180px; float: left">hello</div>
</div>

Problém je v plávaní vnútorných prvkov. Jedným z riešení je to, čo @LokeshGupta zverejnil. Ďalším krokom je, ak nechcete, aby sa vznášal rodič, použiť jasný blok:

<div id="group1" style="padding: 10px">
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
<div style="width: 180px; float: left">...</div>
<div style="clear: both;"></div>
</div>

Zodpovedajúcim spôsobom som zmenil váš kód a pridal som niektoré povinné atribúty. Pozrite si nasledujúci úryvok.

 <div id="group1" style="padding: 10px; border:1px solid; overflow:hidden;">
<div style="width: 180px; border:1px solid; float: left;">...</div>
<div style="width: 180px; border:1px solid; float: left;">...</div>
<div style="width: 180px; border:1px solid; float: left;">...</div>
<div style="width: 180px; border:1px solid; float: left;">...</div>
</div>