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

281

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/

flotador: imagen izquierda

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/

pantalla: imagen en línea

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/

sin imagen de espacio en blanco html

pantalla: bloque en línea;

Parece comportarse exactamente igual display:inline;.

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

display: imagen en bloque en línea

display: table-cell;

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

display: imagen de celda de tabla

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.

EGHDK
fuente
44
Mira lo que usan los chicos de html5boilerplate y Twitter Bootstrap y quédate con él
Robert Niestroj
1
Hay un gran artículo sobre luchar contra el espacio en css-tricks: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea Rosema
Intenté usar la display: inlinepropiedad y descubrí que no se encarga de rellenar correctamente los elementos secundarios. Pero si lo uso, display: inline-blockesto se cuida automáticamente. Por favor, vea el enlace - codepen.io/prashdeep/pen/rVOyvd Por favor, hágame saber sus entradas en el mismo
zilcuanu

Respuestas:

200

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.

Spudley
fuente
2
no necesita un marcado adicional para limpiar flotantes, vea mi respuesta al respecto.
Lie Ryan
3
La respuesta más robusta = respuesta.
EGHDK
2
Siempre uso inline-blockporque está hecho exactamente para estos casos.
Rápli András
1
Un buen método para eliminar el espacio en blanco que se muestra: crea bloque en línea, puede establecer el tamaño de fuente en 0 en el elemento contenedor, luego establecer el deseado para los elementos en línea. Esto evita la necesidad de eliminar espacios en blanco en el html
AlexMorley-Finch
1
@ AlexMorley-Finch: De hecho, esa es una buena solución. Tenga en cuenta, sin embargo, que no funciona si está utilizando tamaños de fuente en ems. Eso significa que puede no ser una solución adecuada para todos los casos. También le gustaría ver esta respuesta que publiqué por separado, que cubre este punto y otras opciones para tratar el problema del espacio en blanco.
Spudley 01 de
34

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.

ingrese la descripción de la imagen aquí

Lie Ryan
fuente
Este excelente punto, no mencionado en MUCHOS tutoriales populares. Un par de preguntas: ¿esto realmente se prueba en diferentes navegadores? ¿Cuál es su método de elección para dibujar el separador entre dos bloques, como navegación y contenido? La razón por la que pregunto es porque si los divs anteriores son de diferente altura, sería difícil.
Shital Shah
@ShitalShah: no estoy muy seguro de lo que quieres decir con "esto", pero he implementado innumerables menús horizontales y el flotador hacia la izquierda y el desbordamiento es IMO, la forma más limpia y confiable de implementar el menú horizontal en muchos navegadores diferentes, antiguos y nuevo. Para agregar separadores, generalmente usaría el borde izquierdo (o imágenes de fondo para separadores más elegantes, si no necesita preocuparse por los navegadores antiguos, también puede usar CSS3 border-image). No entiendo lo que quieres decir con diferentes alturas, ¿quieres explicar más o agregar un violín?
Lie Ryan
Esto aclaró mucho sobre la limpieza y no sabía que el desbordamiento podría hacer esto. Estoy acostumbrado al método: after donde agregas un contenido: "." y visibilidad: oculta. Gracias por esto
Nils_e
9

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.

Zendy
fuente
+1 para el enlace al artículo de Chris Coyier. Una adición a su lista es el método que usan las cuadrículas Pure CSS de YUI : github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

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.

Chad
fuente
si "siempre tienes que comprobar que IE no apesta", siempre te decepcionará. jeje. (Por otro lado, tiene razón al decir que siempre debe verificar que su código no sea compatible con cada versión de IE que desea admitir)
Spudley
4

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).

Wtower
fuente
0

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 .

ingrese la descripción de la imagen aquí

Alireza
fuente