sirve - html display table cell
flotador izquierdo; pantalla vs: en línea; vs display: inline-block; vs display: table-cell; (6)
Prefiero inline-block , pero el modo float sigue siendo una forma útil de armar elementos de HTML, especialmente cuando tenemos elementos que uno debe pegar a la izquierda y el otro a la derecha; el flotador funciona mejor escribiendo menos líneas, mientras que el bloque en línea funciona bien en muchos otros casos.
Mis preguntas)
¿Alguno de estos métodos es preferido por un diseñador web profesional?
¿Algunos de estos métodos son preferidos por un navegador web al dibujar el sitio web?
¿Todo esto es solo una preferencia personal?
¿Hay otras técnicas que me faltan?
Nota: las preguntas anteriores se refieren al diseño de un diseño de varias columnas
flotador izquierdo;
Este es el método que siempre utilizo al crear diseños de columnas, y parece funcionar bien. Sin embargo, el padre colapsa sobre sí mismo, por lo que solo debes recordar clear:both; después. Otra estafa que acabo de encontrar fue la incapacidad de alinear el texto verticalmente.
pantalla: en línea;
Esto parece corregir el problema del padre colapsado, pero agrega espacios en blanco.
Eliminar el espacio en blanco de html parece ser la solución más fácil a este problema, pero no es deseable si usted es realmente exigente con su html.
pantalla: bloque en línea;
Parece comportarse exactamente como display:inline; .
pantalla: tabla-celda;
Funciona perfecto.
Mis pensamientos:
Estoy seguro de que me estoy perdiendo un montón de cosas, como ciertas excepciones que romperán el diseño, pero display:table-cell; Parece que funciona mejor, y creo que comenzaré a reemplazar float:left; Como siempre parezco enredar clear:both; . He leído muchos artículos y blogs sobre esto en la web, pero ninguno de ellos me da una respuesta definitiva sobre lo que debo usar al diseñar mi sitio web.
Prefiero el bloque en línea, aunque el flotador también es útil. La celda de la tabla no se procesa correctamente en los IE antiguos (tampoco lo hace el bloque en línea, pero está el zoom: 1; *display: inline hack en zoom: 1; *display: inline que uso con frecuencia). Si tienes hijos que tienen una altura menor que la de sus padres, los flotadores los llevarán a la cima, mientras que el bloque en línea se equivocará algunas veces.
La mayoría de las veces, el navegador interpretará todo correctamente, a menos que, por supuesto, sea IE. Siempre tiene que verificar para asegurarse de que IE no apesta, por ejemplo, el concepto de tabla-celda.
En toda realidad, sí, se reduce a preferencias personales.
Una técnica que podría usar para deshacerse del espacio en blanco sería establecer un font-size de font-size de 0 para el padre, y luego devolverle el font-size la font-size a los niños, aunque eso es una molestia y grosero.
Solo para el registro, para agregar a la respuesta de Spudley, también existe la posibilidad de usar position: absolute y márgenes si conoce los anchos de columna.
Para mí, el principal problema al elegir un método es si necesita que las columnas ocupen toda la altura (alturas iguales), donde la tabla-celda es el método más fácil (si no le importan mucho los navegadores antiguos).
Suelo usar float: left; y agregar overflow: auto; para resolver el problema padre que colapsa (en cuanto a por qué funciona esto, overflow: auto expandirá el padre en lugar de agregar barras de desplazamiento si no le da una altura explícita, overflow: hidden funciona). La mayoría de las necesidades de alineación vertical que tenía eran para una línea de texto en las barras de menú , que se pueden resolver utilizando la propiedad de line-height . Si realmente necesito alinear verticalmente un elemento de bloque, establecería una altura explícita en el elemento principal y el elemento alineado verticalmente, posición absoluta, 50% superior y margen negativo.
La razón por la que no uso display: table-cell es la forma en que se desborda cuando tiene más elementos de los que puede manejar el ancho del sitio. table-cell obligará al usuario a desplazarse horizontalmente, mientras que los flotadores envolverán el menú de desbordamiento, haciéndolo aún utilizable sin la necesidad de un desplazamiento horizontal.
Lo mejor de float: left y overflow: auto es que funciona hasta IE6 sin cortes, probablemente incluso más.
Yo diría que depende de lo que lo necesites para:
Si lo necesita solo para obtener el diseño de 3 columnas, sugiero hacerlo con
float.Si lo necesita para el menú, puede usar
inline-block. Para el problema de los espacios en blanco, puede usar algunos trucos como lo describe Chris Coyier aquí http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .Si necesita hacer una opción de opción múltiple, que el ancho debe distribuirse uniformemente dentro de un cuadro específico, entonces prefiero
display: table. Esto no funcionará correctamente en algunos navegadores, por lo que depende de la compatibilidad de su navegador.
Por último, lo que podría ser el mejor método es utilizar flexbox . La especificación para esto ha cambiado pocas veces, por lo que todavía no es estable. Pero una vez que se haya finalizado, este será el mejor método que reconozco.
De las opciones que preguntaste sobre:
-
float:left;
No me gustan los flotadores debido a la necesidad de tener un marcado adicional para eliminar el flotador. En lo que a mí respecta, todo el concepto defloatestaba mal diseñado en las especificaciones de CSS. Sin embargo, no podemos hacer nada al respecto ahora. Pero lo importante es que funciona, y funciona en todos los navegadores (incluso IE6 / 7), así que úsalo si te gusta.
El marcado adicional para la limpieza puede no ser necesario si usa el :after selector para borrar los flotantes, pero esta no es una opción si desea admitir IE6 o IE7.
display:inline;
Esto no debe usarse para el diseño, con la excepción de IE6 / 7, donde sedisplay:inline; zoom:1display:inline; zoom:1es un truco de retroceso para el soporte roto parainline-block.display:inline-block;
Esta es mi opción favorita. Funciona bien y de manera consistente en todos los navegadores, con una advertencia para IE6 / 7, que lo soporta para algunos elementos. Pero vea más arriba la solución hacky para solucionar esto.
La otra gran advertencia con inline-block es que, debido al aspecto en línea, los espacios en blanco entre los elementos se tratan de la misma manera que los espacios en blanco entre las palabras del texto, por lo que pueden aparecer espacios entre los elementos. Hay soluciones a esto, pero ninguna de ellas es ideal. (Lo mejor es simplemente no tener espacios entre los elementos).
-
display:table-cell;
Otro en el que tendrás problemas con la compatibilidad del navegador. Los IEs más antiguos no funcionarán con esto en absoluto. Pero incluso para otros navegadores, vale la pena señalar quetable-cellestá diseñada para ser utilizada en el contexto de estar dentro de elementos que se denominantableytable-row; utilizar latable-cellde forma aislada no es la forma prevista de hacerlo, por lo que puede experimentar diferentes navegadores que lo tratan de manera diferente.
¿Otras técnicas que te puedes haber perdido? Sí.
Ya que dice que esto es para un diseño de varias columnas, hay una característica de Columnas CSS que quizás desee conocer. Sin embargo, no es la función mejor admitida (no es compatible con IE incluso en IE9 y el prefijo de proveedor requerido por todos los demás navegadores), por lo que es posible que no desee usarla. Pero es otra opción, y lo pediste.
También está la función CSS FlexBox, que está diseñada para permitirle que el texto fluya de una caja a otra. Es una característica emocionante que permitirá algunos diseños complejos, pero esto todavía está en desarrollo, consulte http://html5please.com/#flexbox
Espero que ayude.