04.11.2015, 21:40
|
|||
|
|||
Zwei Container absolut am Bottom ausrichten
Hi Community,
ich bastle schon seit Stunden an einer Lösung für eine Aufgabe, die mir relativ simpel erscheint. Vielleicht hat jemand die zündende Idee. (?) Das wäre super, denn ich weiß nicht mehr weiter. Also: Es geht darum ein <DIV> auf "bottom" des Elternelements zu positionieren und das zweite <DIV> auf "top" des ersten. (Das Beispiel ist als Screen angehängt.) Was auch immer bei der responssiven Seite passiert egal ob das Elternelment am Riesenscreen oder am Smartphone gezeigt wird, ob beide Elemente ein, zwei, oder mehrzeilig sind, ob nur eines einzeilig ist und das andere mehrzeilig...) Die beiden Elemente sollen am unteren Bildrand kleben. Ich komm nicht drauf. Hat jemand Ideen? DANKE vorab! Raphael 
|
| Sponsored Links |
|
04.11.2015, 23:10
|
||||
|
||||
|
Warum setzt du die beiden Elemente, die unten stehen sollen, nicht einfach noch in ein zusätzliches Element?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege  www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
|
| Sponsored Links |
|
04.11.2015, 23:17
|
|||
|
|||
|
Zitat:
Das zusätzliche Element hat position: relative; Dann ist Container 1 mit position: absolute; bottom: 0; unten positioniert. Aber wenn ich Container 2 auch mit position: absolute; bottom: 0; positioniere, sind beide am Bottom. Wenn ich sage: bottom: 10% dann ist Container 2 immer 10% über dem anderen. Das kann OK sein, wenn der Text einzeilig ist. Aber sobald die untere Bereich mehrzeilig wird, funktioniert es nicht mehr.
|
|
04.11.2015, 23:41
|
|||
|
|||
|
Achso, wenn ich um den ersten, korrekt positionierten Container einen weiteren anlege, der als einzige Eigenschaft position: relative; hat, dann müßte es klappen. (?) Ich probier das mal.
|
|
05.11.2015, 01:37
|
|||
|
|||
|
Hallo,
du suchst aktuell Flexbox ( display: flex; ). Wenn du auf veraltete Lösungen stehst auch eventuell "sticky footer". Für eine konkrete Lösung lieferst du allerdings zu wenig Informationen. Aus deiner Beschreibung geht nicht so recht hervor, wie die Container verschachtelt sein sollen. Oder wie viele es sein dürfen. Gruss MrMurphy
|
|
05.11.2015, 05:44
|
||||
|
||||
|
Zitat:
Lösen kannst Du Dein Problem dann, je nach Voraussetzungen, entweder so wie schon vorgeschlagen (position: absolute, flexbox), oder mit „vertical-align: bottom“ (auf Inline-block-Elementen oder als CSS-Tables) oder aber auch sonst wie … P.S.: Hier ein Test-Case ohne weitere Elementen und als CSS-Table formatiert: HTML-Code:
<!doctype html> <meta charset="utf-8"> <title>RaBo :: xhtmlforum.de</title> <style> html { display: table; width: 80%; height: 100%; margin: 0 10%; } body { display: table-cell; vertical-align: bottom; } /* Farben */ html { background-color: rgb(238, 241, 241); } body { background-color: rgb(190, 190, 190); } body > div { background-color: rgb(241, 243, 243); } div div { color: rgb(255, 255, 255); background-color: rgb(5, 134, 122); } /* Test */ p { margin: 0; padding: .4em 10% .8em; } </style> <div> <p>Zusatzinfo</p> <div> <p>Hier der Link zur Seite</p> </div> </div> Geändert von etux (05.11.2015 um 05:48 Uhr)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 19:07 |
| Container variabler Höhe über einen anderen legen legen, unten ausrichten | Hompster | CSS | 3 | 18.10.2012 08:33 |
| div in container ausrichten (bottom) - 1px problem mit ie | augusto | CSS | 1 | 31.10.2006 20:04 |
| Container über Float ausrichten | frankys9 | CSS | 3 | 22.09.2005 13:35 |
| Wie Container unten ausrichten (bottom) ? | 123 | CSS | 1 | 13.10.2004 16:45 |
Linear-Darstellung
