nicht angemeldet
4 DIVs gleichmäßig nebeneinander verteilen
0 0 0 Doppelposting
Matthias Apsel
0
4 DIVs gleichmäßig nebeneinander verteilen
Hallo zusammen,
ich komm bei einem Problem einfach nicht weiter:
ich möchte 4 DIVs gleichmäßig nebeneinander anzeigen, aber ich bekomm das nicht hin.
Live: http://jsfiddle.net/eHYxX/1/
Der HTML-Code sieht so aus:
<div id="wrapper">
<div id="nr-1"></div>
<div id="nr-2"></div>
<div id="nr-3"></div>
<div id="nr-4"></div>
</div>
Ich habs schon mit diversen Einstellungen versucht.
So siehts noch am Besten aus, aber leider nicht über den gesamten Platz verteilt:
#wrapper { width:100%; border: solid 1px #999; text-align:center; margin: 0 auto; background-color:#aaa;}
#nr-1,#nr-2,#nr-3,#nr-4 { display:inline-block; border: solid 1px #999; text-align:left; margin: 0 auto; background-color:#ccc; width:100px; height:100px;}
Klaus
-
Hallo Klaus,
ich empfehle zum Üben [Link verweist auf Malware]
Gruß Gunther
-
Hallo Gunther,
ich empfehle zum Üben [Link verweist auf Malware]
Danke für den Link. Anhand dessen konnte ich feststellen, dass der Firefox noch nicht display: block versteht sondern noch display: -moz-box; benötigt.
Wenn ich aber eine feste Breite möchte, kann ich nicht mit width:150px; arbeiten (das ignoriert er), wenn ich mit max-width:150px; arbeite, dann sind die 4 Divs nicht mehr gleichmäßig verteilt, sondern wieder linksbündig.
Mit margin: 0 50px; wird es wieder unflexibel, oder?Klaus
-
Hallo Klaus,
Wenn ich aber eine feste Breite möchte, kann ich nicht mit width:150px; arbeiten (das ignoriert er), wenn ich mit max-width:150px; arbeite, dann sind die 4 Divs nicht mehr gleichmäßig verteilt, sondern wieder linksbündig.
Also was genau willst du denn jetzt eigentlich?
Der umschließende Container soll die volle Viewport-Breite haben. Deine darin enthaltenen 4 Boxen aber jeweils eine feste Breite und gleichmäßig darin verteilt? Dass hieße ja, dass die Abstände zwischen den Boxen "variabel" sein müssten.
Oder sollen die 4 Boxen gleichmäßig breit sein und die vorhandene Breite ausfüllen?
Je nach gewünschtem Ziel stehen u.a. folgende Möglichkeiten zur Auswahl
1. display: inline-block
2. display: table[-cell]
3. Floats
4. FlexboxWie gesagt, welche Variante ggf. am ehesten zu empfehlen ist, hängt davon ab, was du beabsichtigst. Letzteres habe ich noch nicht so ganz verstanden.
Gruß Gunther
PS: Und gelbe Karte wegen des Doppelpostings (was ich nicht bemerkt habe).
-
Hallo Gunther,
Also was genau willst du denn jetzt eigentlich?
ich versuchs nochmal zu erklären:
4 Divs, max. Breite 150 px; sollen auf der gesamten verfügbaren Breite gleichmäßig verteilt werden, also sollen sich entsprechend der Auflösung oder Fenstergröße nur die Abstände untereinander gleichmäßig verändern.
Der umschließende Container soll die volle Viewport-Breite haben. Deine darin enthaltenen 4 Boxen aber jeweils eine feste Breite und gleichmäßig darin verteilt? Dass hieße ja, dass die Abstände zwischen den Boxen "variabel" sein müssten.
genau so meine ich es.
PS: Und gelbe Karte wegen des Doppelpostings (was ich nicht bemerkt habe).
Sorry, wegen des "Doppelpostings", zu meiner Verteidigung: Nachdem sich 2 Tage nichts mehr getan hat, machte es imho mehr Sinn, für das exakte Problem einen eigenen Thread aufzumachen.
-
Hallo Klaus!
Der umschließende Container soll die volle Viewport-Breite haben. Deine darin enthaltenen 4 Boxen aber jeweils eine feste Breite und gleichmäßig darin verteilt? Dass hieße ja, dass die Abstände zwischen den Boxen "variabel" sein müssten.
genau so meine ich es.
Hier mal eine Variante mit display:table, die deinen Anforderungen entsprechen sollte.
PS: Und gelbe Karte wegen des Doppelpostings (was ich nicht bemerkt habe).
Sorry, wegen des "Doppelpostings", zu meiner Verteidigung: Nachdem sich 2 Tage nichts mehr getan hat, machte es imho mehr Sinn, für das exakte Problem einen eigenen Thread aufzumachen.
Nein, es ist hier nicht nur erwünscht, sondern auch ausgesprochen hilfreich, wenn man in dem ursprünglichen Thread bleibt - auch wenn es mal ein paar Tage dauert!
Ich habe hier auch immer wieder mal Threads, auf die ich gar keine Antowrt bekomme - kann passieren. ;-)Gruß Gunther
-
Upps, sorry - Link sollte so lauten: http://jsfiddle.net/jA4w7/
Gruß Gunther
-
Upps, sorry - Link sollte so lauten: http://jsfiddle.net/jA4w7/
Vielen Dank,
Dein Beispiel funktioniert sogar noch besser als das von Dave.
Hier kann ich auch munter das Fenster vergößern/verkleiner und das Layout passt sich an.
Das ist für mich perfekt.-
Hier kann ich auch munter das Fenster vergößern/verkleiner und das Layout passt sich an.
Du musst bei dieser Art der Umsetzung aber beachten, dass die Boxen nicht umbrechen, sollte der Viewport zu schmal werden/ sein.
Es empfiehlt sich deshalb vielleicht noch ein 'min-width: 800px;' zu dem #box_wrapper hinzuzufügen.
Das Beispiel soll ja auch nur die Funktionsweise von 'display:table' demonstrieren.
Und jetzt nicht einfach übernehmen und fertig, sondern verstehen, wieso man deine Anforderung so realisieren kann und welche anderen Möglichkeiten es noch gibt und worin sich die einzelnen Varianten unterscheiden.Nur so kannst du zukünftig u. a. entscheiden, welches für einen gewissen Zweck die (vermeintlich) beste Variante ist.
Gruß Gunther
-
Hier kann ich auch munter das Fenster vergößern/verkleiner und das Layout passt sich an.
Du musst bei dieser Art der Umsetzung aber beachten, dass die Boxen nicht umbrechen, sollte der Viewport zu schmal werden/ sein.Es empfiehlt sich deshalb vielleicht noch ein 'min-width: 800px;' zu dem #box_wrapper hinzuzufügen.
Bei min-width: 800px reagiert er sogar insofern gut, als dass er dann Scrollbalken setzt. Passt also.
Das Beispiel soll ja auch nur die Funktionsweise von 'display:table' demonstrieren.
Mit display:table und display:table-cell hatte ich auch probiert, aber nicht, nochmal ein Div in die Table-Cell zu setzen. Das Table-layout:fixed hatte ich bisher nicht gebraucht, da ja alle 4 Boxen die selbe Breite haben.
Interessehalber: Worin besteht jetzt der große Unterschied/Vorteil zwischen tatsächlichen Tabellen und Div-Elemente, die sich wie eine Tabelle verhalten?
Klaus
-
Hi,
Interessehalber: Worin besteht jetzt der große Unterschied/Vorteil zwischen tatsächlichen Tabellen und Div-Elemente, die sich wie eine Tabelle verhalten?
HTML ist eine Auszeichnungssprache.
Wenn du Inhalt falsch auszeichnest ist das HTML vielleicht syntaktisch korrekt, semantisch aber nicht.Wenn du nun also korrektes HTML schreiben willst, aber das _aussehen_ irgendwie anders haben willst verwendest du CSS.
Wenn dir semantik egal ist, helf ich dir nicht mehr :-P~dave
-
Interessehalber: Worin besteht jetzt der große Unterschied/Vorteil zwischen tatsächlichen Tabellen und Div-Elemente, die sich wie eine Tabelle verhalten?
Dave hat es ja bereits erläutert und ich habe das hier auch schon mal ausgeführt.
Gruß Gunther
-
-
-
-
-
Hallo Gunther
Hier mal eine Variante mit display:table, die deinen Anforderungen entsprechen sollte.
Leider bekomme ich bei dem Link nur ein 404 :-(
Dave hat mir in diesem Thread ein funktionierendes Beispiel gezeigt, allerdings noch mit dem Schönheitsfehler, dass beim Fenster verkleinern, die 4. Box (das 4.Div) sehr schnell umgebrochen wird (wenn ich die Breite etwas vergrößere (250px anstatt 100 im Beispiel von dave), aber die 3 verbleibenden schön verkleinert werden. Kann man das Umbrechen auch noch verhindern?
Wenn ich mit min-width und max-width arbeite (zB. min-width:100px; max-width:250px;) dann werden die 4 nicht mehr umgebrochen, aber auch nicht mehr gleich verteilt (der linke Abstand vom 1. Div und der rechte Abstand vom letzten ist zu groß) (ebenso wenn ich die Breite ganz weglasse)
Wenn ich min- und max-width gleichsetze (250px) dann bricht er das 4. wieder um.Klaus
-
-
-
-
-
-
Stichwort
float: left;sollte dir helfen.lg
-
Stichwort
float: left;sollte dir helfen.Hilft mir leider gar nicht. Mit float:left habe ich die bisher schlechtesten Ergebnisse erhalten.
Du kannst mir sehr gerne ein funktionierendes Beispiel zeigen.
Wie in den anderen Posts nochmal genauer erklärt, möchte ich, dass die 4 Divs eine feste Maximalbreite haben (150px) und sich damit also der Zweischenraum zwischend den Divs so ändert, dass die 4 Divs gleichmäßig verteilt dargestellt werden.Klaus
-
-
Om nah hoo pez nyeetz, Klaus!
Doppelpostings sind hier unerwünscht, bleib in deinem bisherigen Thread. Dieser ist hervorragend geeignet um deine Fortschritte zu dokumentieren und weitere Fragen deinerseits aufzunehmen.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
Doppelpostings sind hier unerwünscht, bleib in deinem bisherigen Thread. Dieser ist hervorragend geeignet um deine Fortschritte zu dokumentieren und weitere Fragen deinerseits aufzunehmen.
Auf diesen Thread gab es zwei Tage keine Antwort, daher vermutete ich, dass es wohl Sinn macht, für das spezielle Problem einen eigenen Thread aufzumachen.
Klaus
-
-
-
Hi dave,
box-flex hatte ich dazugenommen, weil ich ganz gerne gewünschte Eigenschaften auch dann definiere, wenn sie von einem Browser als Standard gesetzt sind. Das ist ja unbedingt immer so und bleibt auch nicht immer.
Bei deinem Beispiel ist auch das Problem, dass die Divs auseinandergezogen werden. Ich möchte aber die Breite max. 150px (oder auch fest) haben und sich damit also der Abstand zwischend den Divs gleichmäßig verteilt.
Klaus
-
Hi,
Bei deinem Beispiel ist auch das Problem, dass die Divs auseinandergezogen werden. Ich möchte aber die Breite max. 150px (oder auch fest) haben und sich damit also der Abstand zwischend den Divs gleichmäßig verteilt.
Ich hatte falsch verstanden was du zu erreichen versuchst.
Mit Flexbox kenne ich mich zu wenig aus um eine Lösung dafür zu haben, alterniv.
~dave
-
Hi Dave,
Ich hatte falsch verstanden was du zu erreichen versuchst.
Muss dann daran liegen, dass ich mich missverständlich ausgedrückt habe. ;-))
Mit Flexbox kenne ich mich zu wenig aus um eine Lösung dafür zu haben, alterniv.
Mit dieser Version kann ich hervorragend leben.
Dave, Du bist heute mein Held!Klaus
-
-
-