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)
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
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.
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 ...
Der negative Margin-Trick:
http://pastehtml.com/view/1dujbt3.html
Nicht elegant, denke ich, aber es funktioniert in einigen Fällen.