Deja de flotar! Pàsate a “display:inline-block”!

display-inline-block

Podeis seguir el artículo en JSFIDDLE, una herramienta muy útil cuando queremos probar pequeñas piezas de código JS o CSS, permite escribir el código y ver su resultado en una pantalla partida, ideal para probar propiedades de CSS cuando nos surge alguna duda (cosa que a mi pasa continuamente).

Posicionamiento tradicional de cajas

Normalmente cuando queremos alinear varios bloques en la misma linea empleamos la propiedad CSS “float”, por ejemplo si queremos posicionar 2 columnas de texto adyacentes, tradicionalmente empleariamos float y left:

<div>
    <div style="float:left;width: 30%;outline: green solid thin">Box1</div>
    <div style="float:left;width: 30%;outline: red solid thin">Box2</div>    
</div>
<div style="clear:both"></div>

Las cajas creadas tendrían este aspecto:

float_box

Normalmente debemos añadir el siguiente código para que los elementos que siguen no se monten en la misma linea:

<div style="clear:both"></div>

Propiedad “display”

la propiedad display establece el tipo de caja generada por un elemento, normalmente empleamos como valor “block” o “inline”.

block

El comportamiento normal de un tag “p”  (por citar algún elemento comúnmente conocido) es de bloque, es decir ocupa toda la línea, al ser de bloque empuja contenedor contiguo a siguiente linea (en este caso siguiente parrafo), los elementos “display:block” permiten modificar su tamaño, margen, etc.

Untitled

<p style="display: block;outline: red solid thin;width:200px">El comportamiento normal de un tag "p" es de bloque, es decir ocupa toda la línea, al ser de bloque empuja contenedor contiguo a siguiente linea (en este caso siguiente parrafo), los elementos "display:block" permiten modificar su tamaño, margen, etc...</p>
<p style="display:block; outline: #000000 solid thin">Este es el siguiente parrafo.</p>

inline

Un elemento “inline” solo ocupa el espacio que necesita y no todo el ancho de linea, desgraciadamente no permite modificar su ancho, etc..

Untitled

inline-block

Uno de los valores más curiosos de display es inline-block, que crea cajas que son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en linea.

Uno de los usos del valor “inline-block” es por ejemplo si queremos posicionar 3 columnas de texto adyacentes, tradicionalmente empleariamos float y left, pero con “inline-block”:

CSS:

.caja_inline {
    display: inline-block;
    width: 100px;
}

HTML:

<p>Ahora con cajas inline-block</p>
<div class="content">
    <div class="caja_inline">Uno</div>
    <div class="caja_inline">Dos</div>
    <div class="caja_inline">Tres</div>
</div
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s