css - significa - ventajas y desventajas de html
Ventajas de usar pantalla: bloque en lĂnea vs flotador: izquierda en CSS (5)
Normalmente, cuando queremos tener múltiples DIVs
en una fila usamos float: left
, pero ahora descubrí el truco de display:inline-block
Ejemplo de enlace here . Me parece que display:inline-block
es una mejor manera de align
DIVs
en una fila, pero ¿hay algún inconveniente? ¿Por qué es este enfoque menos popular que el truco float
?
En 3 palabras: inline-block
es mejor.
Bloque en línea
El único inconveniente de la display: inline-block
enfoque de display: inline-block
es que en IE7 y abajo un elemento solo se puede mostrar en inline-block
si ya estaba en inline
por defecto. Lo que esto significa es que en lugar de usar un elemento <div>
tienes que usar un elemento <span>
. Realmente no es un gran inconveniente porque semánticamente un <div>
es para dividir la página, mientras que un <span>
es solo para cubrir un lapso de una página, por lo que no hay una gran diferencia semántica. Una gran ventaja de la display:inline-block
es que cuando otros desarrolladores mantienen su código en un momento posterior, es mucho más obvio qué display:inline-block
y text-align:right
está tratando de lograr que una float:left
o float:right
declaración float:right
. Mi ventaja favorita del enfoque de inline-block
es que es fácil usar vertical-align: middle
, line-height
y text-align: center
para centrar perfectamente los elementos, de una manera intuitiva. Encontré una excelente publicación de blog sobre cómo implementar cross-browser en línea-bloque, en el blog de Mozilla . Aquí está la compatibilidad del navegador .
Flotador
La razón por la que usar el método float
no es adecuado para el diseño de su página es porque la propiedad CSS float
fue originalmente diseñada para envolver texto alrededor de una imagen (estilo revista) y, por diseño, no es la más adecuada para propósitos generales de diseño de página . Al cambiar elementos flotados más tarde, a veces tendrá problemas de posicionamiento porque no están en el flujo de la página . Otra desventaja es que generalmente requiere una corrección de lo contrario, puede romper aspectos de la página. El clearfix requiere agregar un elemento después de los elementos flotados para evitar que sus padres colapsen a su alrededor, lo que cruza la línea semántica entre separar el estilo del contenido y, por lo tanto, es un antipatrón en el desarrollo web .
Cualquier problema de espacio en blanco mencionado en el enlace anterior podría corregirse fácilmente con la propiedad CSS de white-space
.
Editar:
SitePoint es una fuente muy confiable de asesoramiento sobre diseño web y parece tener la misma opinión que yo:
Si es nuevo en el diseño de CSS, se le perdonará pensar que el uso de CSS flota de forma imaginativa es el colmo de la habilidad. Si ha consumido tantos tutoriales de diseño de CSS como puede encontrar, puede suponer que dominar flotadores es un rito de iniciación. Quedarás deslumbrado por el ingenio, asombrado por la complejidad, y obtendrás un sentido de logro cuando finalmente entiendas cómo funcionan las carrozas.
No te dejes engañar Te están lavando el cerebro.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Actualización de 2015: Flexbox es una buena alternativa para los navegadores modernos :
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <''flex-grow''> <''flex-shrink''>? || <''flex-basis''> ]
}
21 de diciembre de 2016 Actualización
Bootstrap 4 está eliminando el soporte para IE9, y por lo tanto se está deshaciendo de los flotadores de las filas y de completar Flexbox.
Hay una característica sobre el bloque en línea que puede no ser directa. Es decir que el valor predeterminado para vertical-align en CSS es la línea base. Esto puede causar un comportamiento de alineación inesperado. Mira este artículo.
http://www.brunildo.org/test/inline-block.html
En cambio, cuando haces un float: left, los divs son independientes el uno del otro y puedes alinearlos usando el margen fácilmente.
Puede encontrar la respuesta en profundidad here .
Pero, en general, con float
debe tener en cuenta y cuidar los elementos circundantes y inline-block
en línea la forma más simple de alinear elementos.
Gracias
Si bien estoy de acuerdo en que, en general inline-block
en inline-block
es mejor, hay algo más que se debe tener en cuenta si usa anchos de porcentaje para crear una cuadrícula sensible (o si desea anchuras perfectas para píxeles):
Si está utilizando inline-block
en inline-block
para cuadrículas con un ancho total del 100% o cerca del 100%, debe asegurarse de que su marcado HTML no contenga espacios en blanco entre las columnas .
Con flotadores, esto no es algo de lo que deba preocuparse: las columnas flotan sobre cualquier espacio en blanco u otro contenido entre columnas. Las respuestas de esta pregunta tienen algunos buenos consejos sobre cómo eliminar el espacio en blanco HTML sin hacer que el código sea feo .
Si por algún motivo no puede controlar el marcado HTML (por ejemplo, un CMS restrictivo), puede probar los trucos que se describen aquí, o puede que necesite comprometer y usar flotantes en lugar de inline-block. También hay feos trucos de CSS que solo deberían usarse en circunstancias extremas, como font-size:0;
en el contenedor de la columna, vuelva a aplicar el tamaño de la fuente dentro de cada columna .
Por ejemplo:
- Aquí hay una cuadrícula de 3 columnas de 33.3% de ancho con
float: left
. Simplemente "funciona" (pero para el contenedor que necesita ser borrado). - Aquí está la misma cuadrícula exacta, con
inline-block
. El espacio en blanco entre bloques crea un espacio de ancho fijo que empuja el ancho total más allá del 100%, rompiendo el diseño y haciendo que la última columna descienda una línea. - Aquí está la misma cuadrícula, con
inline-block
y sin espacios en blanco entre columnas en el HTML . "Simplemente funciona" de nuevo, pero el HTML es más feo y tu CMS podría forzar algún tipo de embellecimiento o sangría a su salida HTML, haciendo esto difícil de lograr en la realidad.
Si desea alinear div
con una precisión de píxel, utilice float. inline-block
parece que siempre requiere cortar algunos píxeles (al menos en IE)