Mein Setup ist jetzt so etwas wie
%Vor%Ich möchte, dass alle divs mit der Klasse "child" sich ausbreiten, um die gesamte Breite des div mit der Klasse container zu füllen?
Wahrscheinlich eine ziemlich einfache Lösung, ich bin ziemlich neu in HTML und CSS
Wie kann ich das so machen, dass egal welche Breite "Container" die Kinder gleichmäßig verteilen?
Danke!
Sie müssen das Verhalten des Tabellenlayouts emulieren, wie in dieser Antwort .
Dies bedeutet NICHT , dass Sie tatsächliche <table> und untergeordnete Elemente verwenden! Dies beinhaltet die Verwendung bestimmter Werte der Eigenschaft display , nämlich table und%. co_de%, um das Layoutverhalten von Tabellen zu emulieren. Sie möchten das tatsächliche Tabellen-Markup für reines Layout nicht verwenden, da dies semantisch inkorrekt und verpönt ist. Wenn es sich bei Ihrem Inhalt um tabellarische Daten handelt, die in eine Tabelle gehören, dann ist es sinnvoll, ein tatsächliches table-cell zu verwenden. Ich werde hier die Nicht-Tabellen-Methode vorstellen, da das wahrscheinlich das ist, was Sie wollen.
Ihr <table> -Element benötigt die Eigenschaft div.container , damit sie sich wie display: table; verhält. Sie möchten auch die <table> -Regel mit dem Wert table-layout , um alle Ihre Kindelemente gleichmäßig zu verteilen. Ihre fixed -Elemente benötigen dann div.child , damit sie sich wie Tabellenzellen verhalten. Der Browser berechnet jetzt automatisch gleichmäßig verteilte Layouts für Ihre untergeordneten Elemente. Beachten Sie, dass Sie für Ihre untergeordneten Elemente keine display: table-cell; -Regel mehr benötigen / wollen, da der Browser dies berechnet. Das Containerelement benötigt eine bestimmte Breite, andernfalls wird die Tabelle einfach so verkleinert, dass sie nur so groß ist wie ihr Inhalt. Beachten Sie, dass Inhalt auch aus den untergeordneten Elementen überlaufen kann, wenn die Inhaltsbreite größer als die berechneten, gleichmäßig verteilten Dimensionen ist.
Der letzte Code ist unten und hier ist eine Geige .
HTML:
%Vor%CSS:
%Vor% Auch eine nicht verwandte Notiz über width . Es wird alle Leerzeichen zwischen Inline-Block-Elementen dargestellt (Sie können dies als Abstand zwischen Ihren untergeordneten Elementen in Ihrer ursprünglichen Geige sehen). Dies ist normal und folgt der Spezifikation, ist aber manchmal unerwünscht. Sie können darüber nachlesen, wie Sie hier umgehen können.