¿Tres DIV de ancho variable, con espaciamiento equivalente? ¿Qué hay de cuatro?

Tengo una navegación secundaria muy simple que estoy tratando de construir en la parte superior del área de contenido dentro de mi sitio web, pero CSS no parece tener ninguna solución simple para un problema tan común: quiero cualquiera de los 3 o 4 DIV igualmente espaciados en la parte superior de la página.¿Tres DIV de ancho variable, con espaciamiento equivalente? ¿Qué hay de cuatro?

1) p. 3 DIVs de ancho variable, con espacios iguales

[[LEFT]    [CENTER]    [RIGHT]]

2) p. 4 DIVs de anchura variable, igualmente espaciados

[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]

Mi solución para el primer problema con sólo 3 DIVs era flotar los DIVs izquierdo y derecho, y luego asignar un tamaño arbitrario para el DIV medio y darle "margen : 0 auto ". Esa no es realmente una solución, pero suponiendo que no haya cambios en la navegación, da una aproximación aproximada de lo que quiero que sean los resultados.

La solución que tengo para el segundo problema con 4 DIV es simplemente centrar un DIV de la misma manera que antes, pero luego flotar dos DIV dentro de ese, por ejemplo.

[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]

Pero, de nuevo, esto requiere la aplicación de un tamaño arbitrario a la DIV medio para la alineación, y si se realiza algún cambio de idioma o de imagen al sitio, los valores de alineación tendrá que volver a calcular. Además, es simplemente una solución demasiado complicada que requiere fusionar la estructura con la presentación.

Cualquier ayuda es muy apreciada.

EDITAR 07/20/2012 17:00

bien, puse la solución "table-cell" en su sitio utilizando porcentajes, pero me encontré con otro tema dentro de mi aplicación un poco más compleja: el tema en cuestión La mano es que cada DIV a la que me refería es en realidad un contenedor para dos DIV más, que son pares de etiqueta-icono, con líneas flotantes o en pantalla: bloque en línea.

p. Ej. http://jsfiddle.net/c3yrm/1/

Como puede ver, el elemento final en la lista se muestra incorrectamente.

¡Cualquier ayuda es de nuevo muy apreciada!

EDITAR 07/20/2012 19:16

solución final con la ayuda arttronics': http://jsfiddle.net/CuQ7r/4/

Fuente

2012-07-20 M. Herold

Algo como esto: http://jsfiddle.net/j08691/c3yrm/? – j08691

posible duplicado de [Para obtener un menú de navegación fluido, ¿cómo ajustar el relleno dinámicamente para cada ruta de navegación?] (Http://stackoverflow.com/questions/11514125/for-a-fluid-navigation-menu-how-to-adjust- padding-dynamically-for-each-breadcru) – arttronics

Eso es exactamente lo que quiero; ¿tiene "table-cell" algún problema de compatibilidad con el navegador del que deba tener conocimiento? Además, estoy encontrando un problema con los divs anidados dentro del div de la tabla-celda, que editaré anteriormente. –

Referencia: jsFiddle Pure CSS Demo

La solución fue float el pan rallado individuales durante el uso de una fórmula simple para determinar el porcentaje de miga width basado en el pan rallado número total.

Fuente

2012-07-21 02:01:41 arttronics

Gracias por la solución. No sabía que era importante usar etiquetas de span aquí en lugar de divs. –

ol { 
    width: 400px; 
    /*width: 800px;*/ 

    display: table; 
    table-layout: fixed; /* the magic dust that ensure equal width */ 
    background: #ccc 
} 
ol > li { 
    display: table-cell; 
    border: 1px dashed red; 
    text-align: center 
}

como aquí: http://jsfiddle.net/QzYAr/

Fuente

2012-07-20 20:58:15

¡Hola, [Reconozco] (http://stackoverflow.com/questions/6310632/html-list-element-sharing-the-parent-width-into-equal-parts/6311029#6311029) ese comentario torpemente redactado! – thirtydot

usted podría utilizar porcentajes, entonces, sólo se se reduce a las matemáticas simples:

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

A continuación, puede especificar un ancho de su recipiente y utilizar

display:inline;

para mantenerlos en línea.

Nota: Si usa bordes para ver lo que hacen los div, se agregará espacio no contabilizado, por lo que tendría que reducir el ancho de sus elementos en un 1% o simplemente cambiar los colores de fondo.

Fuente

2012-07-20 21:08:27 Dom

Una forma que he encontrado para hacerlo es usar cajas flexibles (o en línea-flex).

Here es una gran explicación y un ejemplo de cómo se puede hacer.

Creo que en el futuro, las cajas flexibles serán la forma superior de manejar este tipo de cosas, pero hasta que otros navegadores se pongan al día con la forma de pensar de Mozilla sobre cómo usar el atributo flex-basis (con contenido mínimo, max-content, fit-content, etc. como valores), estos cuadros de flexión continuarán siendo problemáticos para diseños receptivos. Por ejemplo, de vez en cuando, el contenido interno (a_really_really_long_word) no cabe en el espacio asignado cuando la ventana está comprimida, por lo que a veces algunas cosas pueden no ser visibles a la derecha de la pantalla si no tienes cuidado.

Creo que quizás si utiliza la propiedad flex-wrap, es posible que pueda asegurarse de que todo encaja. Here es otro ejemplo de cómo esto podría hacerse (en los navegadores de Mozilla de todos modos).

Tiendo a usar cajas flexibles para membretes o tablas donde el ancho es bastante fijo (no demasiado pequeño) porque generalmente se espacian muy bien; Tiendo a usar objetos flotantes anidados y bloques en línea para sitios web donde el contenido debe aplastarse muy poco (como se sugiere en algunas de las otras respuestas aquí).

Fuente

2016-04-08 18:08:18

¿Tres DIV de ancho variable, con espaciamiento equivalente? ¿Qué hay de cuatro?

Respuesta

Cuestiones relacionadas