HTML
%Vor%CSS
%Vor% Ich möchte, dass das rote Kästchen ( #c ) an der unteren rechten Ecke ausgerichtet wird.
Wenn ich position:relative zu #a und position:absolute;bottom:0;right:0 zu #c hinzufüge funktioniert es, aber sobald ich es hinzufüge, kollabiert das blaue Feld und der Container ( #a ). Ich weiß nicht, was größer sein wird, #b oder #c , also möchte ich die Positionierung auf beide anwenden. Das übliche Clear-Fix funktioniert nicht bei absolut positionierten Elementen.
Wie positioniere ich also #b unten links und #c unten rechts, ohne den Container div #a ? zu kollabieren?
Nun, das ist eine ziemlich esoterische Lösung, aber es funktioniert:)
Setzen Sie #b und #c inline-block so ein, dass sie wie normale Inlines miteinander arbeiten und wir vertical-align verwenden können. Fügen Sie dann text-align:justify; zum Container und :after mit width:100% hinzu, um #b und #c zur linken und rechten Seite zu ziehen. Setzen Sie die Schriftart für Container auf Null (und stellen Sie sie in inneren Blöcken wieder her), um Unter- / Überstreichen und andere Lücken zu vermeiden, und setzen Sie die Schriftart null auf: nach.
font-size:0; funktioniert im IE nicht, daher brauchen wir eine kleine Umgehung mit 1px negativem Rand:
Geige: Ссылка
Das sollte ich glauben
%Vor%Es kann momentan nicht getestet werden, wird aber später getestet. Verwenden Sie einfach die CSS-Datei auf dem Div, das Sie unten ausrichten möchten
Nach einigem Herumspielen scheint das zu funktionieren. Der Trick besteht darin, #a , #b und #c absolut zu positionieren und alle drei in ein relativ positioniertes div zu platzieren.
JSFiddle Ссылка
Ich habe einen Absatz in das äußere Div gesetzt, um der Box eine Höhe zu geben. Wenn du nichts im äußeren div hast, deklariere einfach eine feste Höhe für das äußere div im CSS.
Nachdem ich einige verschiedene Optionen getestet habe, habe ich festgestellt, dass die Verwendung von position: relativ zum übergeordneten Container es ermöglicht, die untergeordneten Tags absolut, aber relativ zum übergeordneten und nicht zum Dokumentfenster zu positionieren.
%Vor%Gib auter div Position: relativ
Geben Sie die innere Div-Position an: absolut und unten: 0px; links: 0px; oder was auch immer du magst.
Es ist sehr wichtig, die äußere Div-Position anzugeben: relativ. wenn nicht manchmal wird es manchmal nicht funktionieren. Und natürlich wird es in sehr alten Internet Explorer wie alles nicht funktionieren.
absolute Elemente haben keine Höhe, wenn Sie also nicht angeben können (wie Höhe: 120px), sind Sie f * * *. Sie können dies nur mit Javascript tun, um die Höhe eines absoluten und zweiten Elements zu überprüfen und mit speziellen Rändern hinzuzufügen.
Um sicher zu sein, welcher Container oben ist, können Sie den Z-Index verwenden.
Ich habe einen anderen Weg vergessen. Verwenden Sie gefälschte doppelte Inhalte von beiden divs, aber es ist eine Menge Arbeit, so wird es schneller sein, es mit Javascript zu tun.