Contenido

display:inline-block para todos los navegadores.

22 feb

+ 7

La propiedad CSS display dispone de una buena lista de posible valores ( inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit) para indicar que tipo de elemento estamos posicionando.  Dos de las más usadas son inline y block .

display:inline

Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque.

Elementos Inline por defecto:

a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

display:block

Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto

Elementos de bloque por defecto:

address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

display:inline-block

En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.

inline-block

En Mozilla Webdev nos muestran un ejemplo de como conseguir que todos los navegadores nos permite obtener diseños como estos sin necesidades usar float en ellos.

inline-block-demo

Código

li {
       width: 200px;
       min-height: 250px;
       border: 1px solid #000;
       display: -moz-inline-stack; /* FF2*/
       display: inline-block;
       vertical-align: top; /* BASELINE CORRECCIÓN*/
       margin: 5px;
       zoom: 1; /* IE7 (hasLayout)*/
       *display: inline; /* IE */
       _height: 250px; /* IE6 */
   }

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.