CSS3: Forçar el tamany DIV automáticament.
Un dels problemes que tothom es troba al treballar amb DIV enlloc de taules TABLE es que al insertar una imatge aquesta pot desbordar el tamany del propi contenidor DIV.
El problema amb DIV incrustats
Veiem un exemple extret de
PageAffairs i de
Swiftthemes on esta molt ben explicat:
| Comportament per defecte | Que volem |
|---|
 |
| from Swiftthemes.com |
|
 |
| from Swiftthemes.com |
|
CSS - Part 1
La solució prové d'incloure en CSS un style i afegir-ho als contenidors afectats. Veiem com funciona:
/* FIX to increase container size to the internal DIV size and avoid image floating outside the container DIV */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* END FIX */
:after indica que s'aplicarà desprès de la resta de elements.
HTML - Part 2
Als contenidors cal incloure:
<div id="main_container">
<div id="foto">
<img src="IMATGE_ENORME.png" height="233" width="320"/>
</div>
Text petit.<br>
<div class="clearfix"></div>
</div>
Enllaços relacionats:
No hay comentarios:
Publicar un comentario