Cambiar el tamaño de la cantidad desconocida de elementos para llenar el ancho del contenedor principal

Question

Necesito poner un número desconocido de div (probablemente un límite de aproximadamente 5) en un contenedor principal y siempre asegurarme de que permanezcan divididos por igual. No estoy seguro de si esto se puede hacer con CSS solo, pero pensé que sería mejor preguntar. Por lo que si se sabe que se utilizan 3 divs:

<style> 
    .menu-button { 
    float: left; 
    width: 33%; 
    } 
</style> 
<div> 
    <div class="menu-button">Button X</div> 
    <div class="menu-button">Button Y</div> 
    <div class="menu-button">Button Z</div> 
</div> 

parece funcionar, pero lo que si el número de divs-botón .menu es desconocido? ¿Hay una mejor manera de hacerlo para que se ajuste automáticamente de forma horizontal?

Answer 1

Desafortunadamente, creo que deberás usar tablas para hacer esto. Como <td>, cambia su tamaño para que encaje en todo el ancho.

HTH

Answer 2

Try this solution (demo page).

Básicamente, necesita hacer los divs display:inline-block, y aplicar text-align:justify a ellos. Luego fuerce un salto de línea. Un inconveniente es que siempre habrá espacio entre los divs, es decir, no hay forma de que sus bordes toquen.

Answer 3

Para hacer eso con cualquier elemento, tiene dos soluciones:

• hacer que el navegador que simula el comportamiento de mesa
• usando la caja flexible diseño

Por ejemplo, para construir un menú horizontal , con el mismo ancho de cada li elementos, con este código HTML:

<div id="menu"> 
    <ul> 
    <li><a href="#">First Element</a></li> 
    <li><a href="#">Second Element</a></li> 
    <li><a href="#">Third Element</a></li> 
    ... 
    <li><a href="#">N Element</a></li> 
    </ul> 
</div> 

Utilizando el diseño de la tabla, el código CSS se vería así:

#menu{ 
    width: 100%; /* for instance */ 
    display: table; 
    table-layout: fixed; 
} 
#menu ul{ 
    display: table-row; 
} 
#menu ul li{ 
    display: table-cell; 
} 

diseño

caja flexible es una solución más moderna, y es pretty widely supported hoy en día:

#menu{ 
    width: 100%; /* for instance */ 
} 
#menu ul{ 
    display: flex; 
    flex-flow: row; 
} 
#menu ul li{ 
    flex-grow: 1; 
}