nicht angemeldet
Zwei Elemente nebeneinander und resize
JürgenB
Zwei Elemente nebeneinander und resize
JürgenB
MudGuard
Rolf B
Matthias ScharwiesHallo,
ich habe zwei Blockelemente nebeneinander angeordnet. Beide sind gleich breit und nehmen die zur Verfügung stehende Breite ein.
Jetzt möchte ich die Breite des linken Elements verändern, und das rechte soll seine Breite so anpassen, dass es wieder den restlichen Platz annimmt.
Geht das mit css, und wenn ja, wie? Oder ist das ein Fall für Javascript?
Gruß
Jürgen
akzeptierte Antworten
Zwei Elemente nebeneinander und resize
Gunnar Bittersmann
Bewertung: +1, 1 Stimme
-
Deiner Beschreibung nach ist das ein Fall für CSS mit Flexbox (display: flex;)
Ansonsten sind deine Infos noch etwas mager.
-
@@Mr.Murphy
Deiner Beschreibung nach ist das ein Fall für CSS mit Flexbox (display: flex;)
Wäre auch meine erste Wahl; mit Grid ginge es auch (bei Breite des ersten Items in einer Längeneinheit, nicht in Prozent).
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar, hallo Murphy,
perfekt, besten Dank.
Gruß
Jürgen
-
-
-
Es geht Beides!
Die Frage ist, was Du letztlich machen willst.
Wenn ich mich recht entsinne, müsste es in etwa so aussehen, wenn man nicht mit der Kirche ums Dorf will. Der Trick besteht darin, jedem Element die 100% Breite zuzuordnen. Die verteilt sich je nach Verhältnis der Teilmengen anteilig. Aber, im Gegensatz zur eigentlich logischen 50/50 Herangehensweise bleibt der Mechanismus nicht bei 50% stehen, sondern zieht auf bis zu 100%.
Als Trigger habe ich hier mal einen hover verbaut, sprich wenn Du mit dem Mauszeiger auf box1 kommst, reduziert sich box1 auf 33% (1/3) und box2 pustet sich auf 67% (2/3) auf.
Natürlich kann man das auch mit dem modernen "Grid" machen, statt mit der klassischen Tabelle.
Viel Erfolg!
<html> <head> <style> table, td, box1, box2 { width:100%; } box1:hover { width:33%; } </style> </head> <body> <table> <tr> <td> <nobr> <div name="box1">Inhalt Box 1</div> <div name="box2">Inhalt Box 2</div> </nobr> </td> </tr> </table> </body> </html>-
Hi,
<table> <tr> <td> <nobr> <div name="box1">Inhalt Box 1</div> <div name="box2">Inhalt Box 2</div> </nobr>Geht mein Kalender vor?
Der zeigt mir das Jahr 2021, aber der Code hier ist doch eher von 199x …
cu,
Andreas a/k/a MudGuard-
Da liegst Du goldrichtig! Mit der Grid-Methode der Neuzeit kann man sicher auch spielen, doch ob das wirklich ein Fortschritt ist? Ich habe Zweifel!
Nach den Eskapaden der windigen Implementierungen der Standards, auf die weder Du noch ich unmittelbaren Einfluss haben, setze ich auf gesetzte Standards. Und das da ist noch die harmlose Variante. Stell Dir mal vor, bis heute setze ich aktiv Framesets ein und habe damit etwas, was im modernen Workaround viel zu viel Ressourcen schluckt.
Ein DIV-Container ist in der technischen Umsetzung etwas Anderes als eine Tabellenzelle.
Letzlich ist es eine Geschmacksfrage, welchen der Wege man wählt. Das Grid-Modell ist im Ansatz so verkehrt nicht, allerdings für mich und meine Projekte nur bedingt attraktiv. Die traditionelle Form funktioniert zügig und zuverlässig zugleich in allen Browsern adäquat.
Ich baue komplexe Mesh-Contentsysteme auf Echtzeitbasis, ohne Indianer, ohne nginx, ohne PHP, ohne SQL. Mit der Offline-Version kann ich persönlich so erstmal gar nichts anfangen, weil (nicht nur) mir - mit Verlaub - die Installation bereits viel zu kompliziert ist.
Eine lokal abspielbare Offline-Version muss ich mir zwar erst mit WGET runterkurbeln, hat aber den Vorteil, das selbst das schneller geht, als dieses Spasspaket anzutreten - bzw. umzustricken und ich habe eine "garantiert lauffähige Offline-Version", für die ich keinen lokalen Webservice bemühen muss (trotzdem kann) - sogar unabhängig vom Betriebssystem.
Da bin ich jetzt schon gespannt, wieviel dabei gegenüber der eingetüteten Installations-Fassung herauskommt. Hintergrund ist der Anruf eines Freundes, der eine zip-Datei mit analogen html-Dateien erwartet hatte und plötzlich vor einem dieser Wunderwerke der Neuzeit stand.
sonnige Nachtgrüsse John Connor
-
-
Hallo Bastelstunde,
ich möchte den guten alten Wolfgang Pauli zitieren:
Das ist nicht nur nicht richtig, es ist nicht einmal falsch!
Dein Markup ist Unfug, es enthält ein missbilligtes Element (nobr), das im Zusammenhang mit div-Kindern auch noch unpassend eingesetzt wird, das CSS bewirkt im Wesentlichen nichts (sichtbares) und das Ausgangsproblem (nebeneinander stellen) wird nicht behandelt.
Wenn Du schon Table-Layout vorschlägst, dann mach's wenigstens richtig. So ist es ungetesteter, untauglicher Müll. Der Müll ist derart unkonstruktiv, dass es nur noch Vorsatz sein kann. Mit reiner Unfähigkeit gelingt das nicht.
Troll Dich, Du Troll!
Rolf
--
sumpsi - posui - obstruxi
-
-
Hallo JürgenB,
wo schon alle am Basteln sind für Dich - hier ist eine Flexbox mit echtem Resize:
https://jsfiddle.net/Rolf_b/y17625mq/
Die resize-Eigenschaft bietet allerdings nur die untere rechte Ecke zum Schieben an…
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
auch dir vielen Dank. Ich habe jetzt Gunnars Grid-Variante genommen, da ich schon Grid hatte und nur
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr ));durch
grid-template-columns: auto 1fr;ersetzen musste. Leider werde ich für schmale Viewports wohl wieder einen Mediaquery brauchen.
Gruß
Jürgen
-
-
-
Servus!
Hallo,
fürs Archiv hier noch meine auf Gunnars Idee aufbauende Grid-Lösung.
Ich komme zu spät dazu, aber iirc @Felix Riesterer hatte diese Frage schon mal gestellt, die 2016 in diesem Kapitel landete:
Die erste Umsetzung ist mit Flexbox, die zweite mit Grid.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-