Zmiana rozmiaru nieznanej liczby elementów w celu wypełnienia szerokości kontenera nadrzędnego

Question

Muszę umieścić nieznaną liczbę elementów div (prawdopodobnie około 5) w kontenerze nadrzędnym i zawsze upewnić się, że są one równo podzielone. Nie jestem pewien, czy można to zrobić za pomocą samego CSS, ale pomyślałem, że lepiej zapytać. Więc jeśli wiemy, że 3 DIV używane są:

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

wydaje się działać, ale co jeśli liczba div .menu-przycisk jest nieznany? Czy jest lepszy sposób na to, aby automatycznie dopasować się poziomo?

Answer 1

Niestety, do tego celu trzeba użyć tabel. Jak <td> zmienia rozmiar, aby pasował do pełnej szerokości.

HTH

Answer 2

Try this solution (demo page).

Zasadniczo musisz wykonać divy display:inline-block i zastosować do nich text-align:justify. Następnie wymuś podział linii. Jedną wadą jest to, że zawsze będzie pewna przestrzeń pomiędzy elementami dwoistymi, tj. Nie ma możliwości, aby ich krawędzie się zetknęły.

Answer 3

Aby to zrobić z dowolnego elementu, masz dwa rozwiązania:

• sprawiają przeglądarkę symulując zachowanie tabeli
• stosując elastyczne Box układ

Na przykład, aby zbudować menu poziomego , z jednakową szerokością każdego elementu li, z tym kodem 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> 

Stosując układ tabeli, kod CSS będzie wyglądać tak:

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

układ

Flexible Box jest bardziej nowoczesne rozwiązanie, i to pretty widely supported dziś:

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