Ich habe folgenden Code:
%Vor%Diese 3 Elemente - ul und 2 divs - sind nebeneinander angeordnet und wie Sie sehen können, haben sie dynamische Breiten. Ich muss diese 3 Artikel in div.parent passen, deren Breite auf 1200px festgelegt ist.
Momentan verwende ich 'float: left;' um diese 3 Elemente nebeneinander auszurichten, und ich kann 'display: inline-block;' wenn nötig [funktioniert einwandfrei]. Aber ich habe versucht, ein paar Tricks mit 'display: table;' für das übergeordnete Element und 'display: table-cell;' für diese 3 Artikel, ohne Erfolg.
Ich muss diesen verbleibenden Platz auf dem schwarzen div füllen, welches der 'div.fill' ist. Irgendwelche Ideen?
EDIT2: Ссылка
Fügen Sie einfach
hinzu %Vor% Wo float: none das Floating entfernt (Sie können auch vermeiden, float: left auf .fill anzuwenden) und overflow: hidden (oder etwas anderes als visible ) verhindern, dass sich schwebende Elemente .fill überschneiden.
Andere Möglichkeiten:
Sie könnten display: table-cell und display: table verwenden, aber Sie konnten nicht angeben, welches Element wachsen soll, um den gesamten verbleibenden Platz zu füllen.
Wenn Sie jedoch die volle Kontrolle haben möchten und die verbleibenden Leerzeichen auf eine komplexere Weise verteilen möchten, sollten Sie Flexboxes .
Ich habe die Eltern display:table und die 3 Kinder als display:table-cell gemacht. Jetzt füllen alle 3 Kinder die Breite des Elternteils und du musst keine von ihnen schweben lassen. Ein Vorteil dieser Methode besteht darin, dass Sie vertical-align verwenden und außerdem das Umbrechen von Blöcken vermeiden können, wenn die übergeordnete Komponente kürzer als der Inhalt ist. In gewisser Weise bekommt man die ganze Güte eines table .
Sie können die Breite der ersten beiden untergeordneten Elemente festlegen und die letzte ohne Angabe der Breite belassen, so dass sie den übergeordneten Container füllt.
Verwenden Sie display: table für den Container und display: table-row für seine direkten Kinder.
Höhe festlegen: 0 für die divs mit variabler Höhe und Höhe: auto für das div, das den verbleibenden Platz füllen soll.
Wenn der Container eine feste Höhe (in Pixeln oder%) benötigt, können Sie ein einzelnes div mit {overflow-y: auto; Höhe: 100%} zum horizontalen Füller und addieren Inhalt innerhalb dort.
%Vor%Hinweis: Flex-Anbieterpräfixe hinzufügen, wenn dies für Ihre unterstützten Browser erforderlich ist.
