|
|||
wie float wieder entfernen?
Hallo
Ich habe meine beiden Divs links und rechts positioniert, und zwar so: HTML-Code:
.div-left { width: 50%; float: left; } .div-right { width: 50%; float: right } Ich habe es mal so probiert HTML-Code:
@media (max-width: 767px) { .div-right { clear: right; display: block } } |
Sponsored Links |
|
|||
Das ist m.W. nach nicht möglich. Das ist natürlich das Standardverhalten von HTML. Von oben nach unten.
Du kannst natürlich dein Right ab einer bestimmten Breite Absolute positionieren und dem left dann den Abstand nach oben geben. Natürlich schwierig, wenn die Höhe von div-right variiert. Test auf jsbin |
Sponsored Links |
|
|||
Hallo!
Warum sollte das nicht funktionieren? Solange im HTML das .div-right VOR dem .div-left liegt, ist das kein Problem. Edit this Fiddle - jsFiddle
__________________
Gruß schatzi |
|
||||
Von einem langjährigen Forum-User hätte ich eine deutlich bessere Fragestellung erwartet.
Ich gehe davon aus, dass div.div-left im Quelltext vor div.div-right liegt und Du, aus welchem Grund auch immer, deren Reihenfolge nicht ändern kannst. In welcher Umgebung die beiden Elementen liegen, verrät mir aber leider auch meine Kristallkugel nicht. Zitat:
Wenn die zwei DIVs die einzige Elementen sind, ist es sehr einfach, das untere Element vor dem oberen Element darzustellen. Natürlich haben die Elementen keine feste Höhe (sonst wäre es ja zu einfach ) – deren Inhalt bestimmt die Höhen. Auf meiner Testsite habe ich ein einfaches Beispiel gefunden: Inhalt zuerst Die Technik kann man auch bei kompletten Layouts anwenden: Demo-Layout : Inhalt zuerst, zwei gleich hohe Spalten, elastisch :: emil-webdesign.net Und hier ein Testcase als mögliche Lösung: HTML-Code:
<!DOCTYPE html> <meta charset="utf-8"> <title>zweites Element zuerst</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; } .div-left, .div-right { float: left; width: 50%; } @media only screen and ( max-width: 767px ) { body { position: relative; } .div-left { position: absolute; top: 100%; width: 100%; } .div-right { float: none; width: 100%; } } /* Design */ html { font-size: 100%; } body { font-size: medium; color: #222; background: #626262; } div { padding: 2em 0; } .div-left { background: #ddd; } .div-right { color: #ddd; background: #2d333c; } b { padding: 0 2em; } span { padding: 1em 2em; } /* mehr Inhalt */ div:hover i, span { display: none; } div:hover span { display: block; } </style> <div class="div-left"> <b>links</b> </div> <div class="div-right"> <b>rechts</b> <i>... mehr Inhalt »</i><span>Dagegen tadelt und hasst man mit Recht Den, welcher sich durch die Lockungen einer gegenwärtigen Lust erweichen und verführen lässt, ohne in seiner blinden Begierde zu sehen, welche Schmerzen und Unannehmlichkeiten seiner deshalb warten ...</span> </div> Geändert von etux (12.07.2013 um 08:15 Uhr) |
|
||||
Nachtrag:
Der „Trick“ ist sehr einfach und sollte alleine aus dem Quelltext im Testcase leicht zu erkennen sein. Dennoch eine kurze Erklärung, wie das zweite Element vor dem ersten dargestellt wird: + das erste Element wird aus dem Dokumentenfluss genommen (position: absolute). So beeinflusst das Element die Höhe vom body nicht mehr - die Höhe vom body wird jetzt nur durch das zweite Element bestimmt + body wird als Containing Block für das (abs. pos.) erste Element definiert (position: relative) + das erste Element bekommt ein „top: 100%;“. D.h. die obere Kante des ersten Elements liegt immer da an, wo das body endet (an dessen Unterkante). = Da die Unterkanten vom zweiten Element und body letzt auf einander liegen, fängt das erste Element immer da an, wo das zweite endet. Unabhängig davon, ob und wie sich der Inhalt der Elementen ändert . Im Beispiel habe ich das body-Element genommen, um den Quellcode übersichtlich zu halten. Selbstverständlich könnte man mit einem anderen Element die zwei DIVs umschließen. So wie in den anderen zwei Beispiele (s. Links in meinem ersten Beitrag). |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
joomla template | wrock | CSS | 2 | 06.04.2012 20:24 |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
Webseite für Smartphones Optimieren. | Cybertronic | CSS | 8 | 25.08.2011 12:44 |
Webseite für Smartphones Optimieren | Cybertronic | CSS | 8 | 18.08.2011 10:16 |