Wie bringe ich ein Div dazu, auf dem Boden seines Containers zu schwimmen?
Ich habe Bilder und Boxen am oberen Rand eines Containers mit float:right (oder links) viele Male schweben lassen. Kürzlich musste ich ein Div in der unteren rechten Ecke eines anderen Divs mit dem normalen Textumbruch, den man mit float erhält (Text wird nur oben und links umbrochen), einfügen.
Ich dachte, dies muss relativ einfach sein, obwohl float keinen unteren Wert hat, aber ich habe es nicht geschafft, es mit einer Reihe von Techniken zu tun und die Suche im Web hat nichts anderes als mit absoluter Positionierung, aber das doesn't geben die richtige Wortumbruch Verhalten.
Ich hatte gedacht, dies wäre ein sehr gängiges Design, aber anscheinend ist es das nicht. Wenn niemand einen Vorschlag hat, muss ich meinen Text in separate Boxen aufteilen und die divs manuell ausrichten, aber das ist ziemlich prekär und ich würde es hassen, das auf jeder Seite zu tun, die es braucht.
EDIT: Nur ein Hinweis für alle, die hierher kommen. Die oben als Duplikat verlinkte Frage ist in Wirklichkeit kein Duplikat. Die Anforderung, dass der Text um das eingefügte Element umbrochen werden muss, macht es völlig anders. In der Tat macht die Antwort auf die am höchsten bewertete Antwort hier deutlich, warum die Antwort in der verlinkten Frage als Antwort auf diese Frage falsch ist. Wie auch immer, es scheint immer noch keine allgemeine Lösung für dieses Problem zu geben, aber einige der Lösungen, die hier und in der verlinkten Frage gepostet wurden, können in bestimmten Fällen funktionieren.
Setzen Sie das übergeordnete Div auf "Position: relativ", dann das innere Div auf...
...und das war's schon :)
Nachdem ich ein paar Tage lang mit verschiedenen Techniken gekämpft habe, muss ich sagen, dass dies unmöglich zu sein scheint. Selbst mit Javascript (was ich nicht tun möchte) scheint es nicht möglich zu sein.
Um zu klären, für diejenigen, die nicht verstanden haben - das ist, was ich suche: im Verlagswesen ist es durchaus üblich, ein Layout ein Einsatz (Bild, Tabelle, Figur, etc.), so dass seine Unterseite Linien bis mit dem Boden der letzten Zeile des Textes eines Blocks (oder Seite) mit Text fließt um den Einsatz in einer natürlichen Art und Weise über und nach rechts oder links, je nachdem, welche Seite der Einsatz ist auf der Seite. In Html/Css ist es trivial, den float-Stil zu verwenden, um den oberen Rand einer Einfügung mit dem oberen Rand eines Blocks in Einklang zu bringen, aber zu meiner Überraschung scheint es unmöglich zu sein, den unteren Rand des Textes und der Einfügung in Einklang zu bringen, obwohl dies eine übliche Layoutaufgabe ist.
Ich schätze, dass ich die Designziele für diesen Artikel noch einmal überdenken muss, es sei denn, jemand hat einen Vorschlag in letzter Minute.
Legen Sie das div in ein anderes div und setzen Sie den Stil des übergeordneten div auf "position:relative". Dann setzen Sie auf dem untergeordneten div die folgenden CSS-Eigenschaften:
Position:absolute; bottom:0;