flotador izquierdo; vs pantalla: en línea; vs pantalla: bloque en línea; vs display: celda de tabla;

Mis preguntas)

1. ¿Alguno de estos métodos es preferido por un diseñador web profesional?

2. ¿Alguno de estos métodos es preferido por un navegador web al dibujar el sitio web?

3. ¿Es todo esto solo preferencia personal?

4. ¿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;

http://jsfiddle.net/CDe6a/

Este es el método que siempre uso al crear diseños de columna, y parece funcionar bien. Sin embargo, el padre se colapsa sobre sí mismo, por lo que solo debe recordar clear:both;después. Otro inconveniente que acabo de encontrar fue la imposibilidad de alinear el texto verticalmente.

pantalla: en línea;

Esto parece corregir el problema del colapso principal, pero agrega espacios en blanco.

http://jsfiddle.net/CDe6a/1/

Eliminar el espacio en blanco de html parece ser la solución más fácil para este problema, pero no es deseable si eres realmente exigente con tu html.

http://jsfiddle.net/CDe6a/2/

pantalla: bloque en línea;

Parece comportarse exactamente igual display:inline;.

http://jsfiddle.net/CDe6a/3/

display: table-cell;

http://jsfiddle.net/CDe6a/4/

Funciona perfecto

Mis pensamientos:

Estoy seguro de que me faltan un montón de cosas, como ciertas excepciones que romperán el diseño, pero display:table-cell;parece funcionar mejor, y creo que comenzaré a reemplazarlo, float:left;ya que parece que siempre me equivoco 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.

De las opciones sobre las que preguntó:

• float:left;
  No me gustan los flotadores debido a la necesidad de tener un marcado adicional para despejar el flotador. En lo que a mí respecta, todo el floatconcepto fue mal diseñado en las especificaciones 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 úselo si lo desea.

El marcado adicional para borrar puede no ser necesario si usa el :afterselector 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 display:inline; zoom:1hay un truco alternativo para el soporte roto parainline-block .

• display:inline-block;
  Esta es mi opción favorita Funciona bien y consistentemente en todos los navegadores, con una advertencia para IE6 / 7, que lo admite para algunos elementos. Pero vea más arriba la solución hacky para evitar esto.

La otra gran advertencia inline-blockes 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 puede obtener espacios entre los elementos. Hay soluciones para esto, pero ninguno de ellos es ideal. (lo mejor es simplemente no tener espacios entre los elementos)

• display:table-cell;
  Otro donde tendrás problemas con la compatibilidad del navegador. Los IE más antiguos no funcionarán con esto en absoluto. Pero incluso para otros navegadores, vale la pena señalar que table-cellestá diseñado para usarse en un contexto de estar dentro de elementos con el estilo tabley table-row; el uso table-cellaislado 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 hayas perdido? Si.

• Como usted dice que esto es para un diseño de varias columnas, hay una función de columnas CSS que quizás desee conocer. Sin embargo, no es la característica más compatible (no es compatible con IE incluso en IE9, y un prefijo de proveedor requerido por todos los demás navegadores), por lo que es posible que no desee utilizarlo. Pero es otra opción, y lo preguntaste.

• También hay una función CSS FlexBox, que tiene la intención de permitirle que el texto fluya de un cuadro a otro. 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.

Yo suelo usar float: left; y agrego overflow: auto;para resolver el problema del colapso de los padres (en cuanto a por qué esto funciona, overflow: autoexpandirá el padre en lugar de agregar barras de desplazamiento si no le da una altura explícita, también overflow: hiddenfunciona). La mayoría de las necesidades de alineación vertical que tenía son para una línea de texto en las barras de menú , que se pueden resolver usando la line-heightpropiedad. Si realmente necesito alinear verticalmente un elemento de bloque, establecería una altura explícita en el elemento primario y el elemento alineado verticalmente, la posición absoluta, el 50% superior y el margen negativo.

La razón por la que no uso display: table-celles la forma en que se desborda cuando tienes 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 desplazamiento horizontal.

Lo mejor de float: left y overflow: auto es que funciona todo el camino de regreso a IE6 sin hacks, probablemente aún más.

Yo diría que depende de para qué lo necesites:

1. Si lo necesita solo para obtener un diseño de 3 columnas, le sugiero que lo haga float.

2. Si lo necesita para el menú, puede usarlo inline-block. Para el problema del espacio en blanco, puede usar algunos trucos como lo describe Chris Coyier aquí http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .

3. Si necesita hacer una opción de opción múltiple, que el ancho debe extenderse uniformemente dentro de un cuadro específico, entonces preferiría display: table. Esto no funcionará correctamente en algunos navegadores, por lo que depende de la compatibilidad de su navegador.

Por último, cuál podría ser el mejor método está utilizando flexbox. La especificación para esto ha cambiado algunas veces, por lo que aún no es estable. Pero una vez que se haya finalizado, este será el mejor método que considero.

Prefiero inline-block, aunque float también es útil. Las celdas de tabla no se representan correctamente por los IE antiguos (tampoco lo hace el bloqueo en línea, pero existe el zoom: 1; *display: inlinetruco que uso con frecuencia). Si tiene niños que tienen una altura menor que sus padres, los flotadores los llevarán a la cima, mientras que el bloqueo en línea se arruinará a veces.

La mayoría de las veces, el navegador interpretará todo correctamente, a menos, por supuesto, que sea IE. Siempre debe verificar para asegurarse de que IE no sea malo, por ejemplo, el concepto de celda de tabla.

En realidad, sí, todo se reduce a preferencias personales.

Una técnica que podría utilizar para deshacerse del espacio en blanco sería establecer un font-size0 para los padres y luego darles la font-sizeespalda a los niños, aunque eso es una molestia, y asqueroso.

Solo para el registro, para agregar a la respuesta de Spudley, también existe la posibilidad de usar position: absolutey márgenes si conoce los anchos de columna.

Para mí, el problema principal al elegir un método es si necesita que las columnas llenen toda la altura (alturas iguales), donde table-cell es el método más fácil (si no le interesan mucho los navegadores antiguos).

Prefiero inline-block, pero floatsigo siendo una forma útil de juntar elementos HTML, especialmente cuando tenemos elementos que uno debe pegar a la izquierda y otro a la derecha, flotar trabajando mejor con menos líneas de escritura, mientras que el bloque en línea funciona bien en muchos otros casos .