webentwicklung-frage-antwort-db.com.de

CSS - div eine Höhe erben lassen

Ich versuche, eine Box mit abgerundeten Ecken zu erstellen, bei der die Höhe und Breite des DIVs vom Inhalt abhängt, also passt es sich automatisch an ...

Das Beispiel finden Sie hier: http://pastehtml.com/view/1duizyf.html

Das Problem ist, dass ich die "test_mid_left" (schwarzen Hintergrund) und "test_mid_right" (türkisfarbenen Hintergrund) nicht bekomme, um die Höhe vom "test_mid_center" (grüner Hintergrund) zu erben. Ich habe Höhe ausprobiert: 100% und Auto, aber nichts davon funktioniert. Wie kann ich sie dazu bringen, die Höhe vom Inhalt zu erben?

(Der Grund, warum ich im linken und rechten Inhalt des Beispiels "min-height: xx" verwendet habe, ist lediglich zu zeigen, über welche Boxen ich spreche)

18
donpedroper

Wie bereits erwähnt, kann dies nicht mit Schwimmern durchgeführt werden, sie können keine Höhen erben, sie wissen nichts von ihren Geschwistern, so dass beispielsweise die beiden Schwimmkörper die Höhe des Center-Inhalts nicht kennen, also nicht erben können von irgendetwas.

Normalerweise muss die geerbte Höhe entweder von einem Element stammen, das eine explizite Höhe hat, oder wenn height: 100%; durch den Anzeigebaum nach unten weitergegeben wurde. Das einzige, was mir bewusst ist, gibt die Höhe an, die nicht von oben kommt Der "Baum" ist ein absolut positioniertes Element - Sie können beispielsweise alle oberen rechten unteren linken Seiten und Ecken (Sie kennen die Höhe und Breite der Ecken sowieso) absolut positioniert haben. Und wie Sie scheinen, die Breiten zu kennen (von linken/rechten Rändern) und Höhen von oben/unten) und die Breiten der oberen/unteren Mitten sind bei 100% einfach - das einzige, was zu berechnen ist, ist die Höhe der rechten/linken Seiten des Inhalts wächst -

Das können Sie tun, auch ohne alle vier Positionierungskoordinaten von IE6 zu verwenden / 7 unterstützt nicht

Ich habe ein Beispiel erstellt, das auf dem basiert ist, was Sie angegeben haben. Es hängt von einer festen Breite (Ihrem Rahmen) ab, aber ich denke, es könnte auch mit einer flexiblen Breite funktionieren. Die Verwendung dieses Effekts könnte für die ausgefallenen Bildränder von Vorteil sein, für die wir keine Unterstützung erhalten können, bis mehrere Hintergrundbilder oder Bildränder vollständig verfügbar sind. Wer weiß, ich spielte, also halten Sie es einfach da draußen!

konzeptbeispiel ist hier

26
clairesuzy

Das Problem

Wenn ein Element schwebend ist, enthält es das übergeordnete Element nicht mehr, da der Schwimmer aus dem Fluss entfernt wird. Das schwebende Element befindet sich außerhalb des natürlichen Flusses, sodass alle Blockelemente so dargestellt werden, als wäre das schwebende Element nicht dort, sodass ein übergeordneter Container nicht vollständig erweitert wird, um das schwebende untergeordnete Element aufzunehmen.

Sehen Sie sich den folgenden Artikel an, um einen besseren Überblick über die Funktionsweise der CSS-Float-Eigenschaft zu erhalten:

Das Geheimnis der CSS-Float-Eigenschaft


Eine mögliche Lösung

Ich denke, der folgende Artikel ähnelt dem, was Sie versuchen zu tun. Schauen Sie sich das an und sehen Sie, ob Sie Ihr Problem lösen können.

Spalten gleicher Höhe mit Cross-Browser-CSS

Ich hoffe das hilft.

8
Hristo

Sie müssen einen Schwimmer herausnehmen: left; property ... weil bei der Verwendung von float das übergeordnete div nicht die Höhe der untergeordneten Elemente ausgrubelt ... Wenn Sie möchten, dass der übergeordnete Tauchgang die untergeordnete Höhe ermittelt, müssen Sie dem übergeordneten div eine css-Eigenschaft überlassen : Aber um Ihr Problem zu lösen, können Sie display: table-cell verwenden; anstelle von float ... skaliert es die div-Höhe automatisch auf die übergeordnete Höhe ...

0
Aram Sargsyan

Der negative Margin-Trick:

http://pastehtml.com/view/1dujbt3.html

Nicht elegant, denke ich, aber es funktioniert in einigen Fällen.

0
user255594