Dynamische Anpassung von zwei äußeren Spalten an die variable Breite der mittleren Spalte
Ich würde mich selbst als einen fortgeschrittenen / fortgeschrittenen CSS / HTML-Codierer betrachten, aber ich bin auf das folgende Szenario gestoßen. Ich fange an zu denken, dass es unmöglich ist, aber ich möchte wirklich glauben, dass es so ist.
Nehmen wir an, die Wrapper-Breite ist 1000px.
Darin sind drei Spalten. Die beiden äußeren Spalten haben die gleiche Breite, diese Breite wird durch die mittlere Spalte bestimmt. Die mittlere Spalte ist die einzige mit Inhalt, nur eine Textzeile mit 30px Padding auf jeder Seite. Wenn also die Zeile des Inhalts 100px mit Auffüllung ist, dann wären die anderen zwei Spalten (1000-100) / 2 jeweils.
Gibt es eine dynamische Möglichkeit, die beiden äußeren Spalten an die variierende Breite der mittleren Spalte anzupassen, die durch ihren variierenden Inhalt definiert ist, eine Textzeile?
Grafik von dem, was ich erreichen möchte:
3 Antworten
Gute alte Tische zur Rettung:
Eigentlich denke ich, Tische sind der Teufel, aber das funktioniert so, wie du es beschrieben hast. Und hier verwendet es display: table-cell für die untergeordneten divs, also ist es funktional das selbe mit nice markup:
Das zentrale Element kann tatsächlich eine dynamische Breite haben; Um zu verhindern, dass der Inhalt zerquetscht wird, fügte ich einfach einen white-space: nowrap zu dem p hinzu, der den Text enthält.
Ich habe auch bestätigt, dass diese Lösung neben Chrome auch in IE8 und FF funktioniert.
Am nächsten kam mir die Verwendung von display: table; und Tabellenzelle. Dies schafft den dynamischen Effekt, den Sie suchen, aber ich denke nicht, dass Sie den gewünschten Effekt erzielen können, ohne eine explizite Breite für das zentrale Element festzulegen.
HTML:
%Vor%CSS:
%Vor%Sie können meinen Versuch hier ausprobieren , er hat einige Knöpfe, damit Sie die verschiedenen Zustände sehen können, Breite ein / aus und fügen Sie Text usw. hinzu (die jQuery hat nichts mit der Lösung zu tun)
Ich denke, das ist so nah, wie Sie es mit reinem CSS bekommen.
Dies ist nicht die eleganteste Lösung, aber es funktioniert. Ich wollte die reine CSS-Route gehen, konnte es aber nicht herausfinden. Gute Arbeit, Jblasco und Kyle Sevenoaks, das herauszufinden!
Hier ist meine jsFiddle-Demo . Wenn es Ihnen nichts ausmacht, ein wenig JavaScript zu verwenden (in meinem Beispiel jQuery):
HTML:
%Vor%CSS:
%Vor%JavaScript:
%Vor%