Abstände zwischen Containern...

[Stefan]

Hallo Zusammen,
suche schon länger nach einer "optimalen" Lösung für folgendes Problem:
Eine Reihe von Div-Containern soll nebeneinander dargestellt werden, jeweils mit einem abstand von 10px dazwischen.

  
<div style="margin-right; width:50px; float:right;">1</div>  
<div style="margin-right; width:50px; float:right;">2</div>  
<div style="margin-right; width:50px; float:right;">3</div>  
<div style="margin-right; width:50px; float:right;">4</div>  
<div style="margin-right; width:50px; float:right;">5</div>  
<div style="margin-right; width:50px; float:right;">6</div>  

Wenn eine Zeile voll ist, wird automatisch eine neue Zeile erstellt.
Normalerweise gebe ich dafür jedem DIV einen margin-right von 10px und die Sache ist gegessen. Wenn ich aber nun einen DIV darum lege, hätte ich natürlich links keinen Abstand zum umliegenden DIV, rechts aber die 10px vom letzten DIV in der Reihe.

Gibt es einen Lösungsansatz es besonders elegant hinzubekommen, dass die Abstände nur zwischen den DIVs sind aber nicht links oder rechts?
Das ganze soll nach Möglichkeit ohne zutun eines Scriptes und mit nur einer CSS-Class funktioniern.
Also prinzipiell etwas in der Art:

  
.abstand{ margin-left-nur-wenn-links-ein-div-daneben-ist:10px; }  

Zum Hintergrund: Ich habe ein Script welches Datenbankeinträge ausliest und nebeneinander darstellt. So werden dann z.B. 5 Einträge pro Reihe angezeigt und 10 Reihen untereinander. Darüber und darunter sind Linien oder Bilder über die gesamte Breite. Links sind die DIV-Boxen mit den Einträgen bündig mit den Linien und Bildern, rechts fehlen aber durch den margin 10px, bzw. der Umbruch erfolgt 10px zu früh, da die 10px ja hinzugerechnet werden.
Ich hätte gern eine dynamische Lösung, wo das Script nicht eingreifen muss um die Zwischenräume zu generieren... falls das überhaupt irgendwie nur per CSS geht.

Hoffe das ist einigermaßen verständlich...

Grüße,
Stefan

[dave]

Hi,

soweit ich das verstehe weißt du wie viele Elemente nebeneinander sind.
Wenn du also z.B. weißt dass immer nach dem 5ten Element umgebrochen werden soll:

:nth-child(5n) {margin-right:0;}

~dave

[suit]

:nth-child(5n) {margin-right:0;}

Viel Spaß bei flexibler Breite des Containers :)

Da hilft nur links und rechts einen Margin zu verwenden und den Container zu umschließen und die margins dann entsprechend per overflow verschwinden lassen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Stefan!

gib allen einen linken Abstand, nur dem ersten nicht. Du suchst strukturelle Pseudoklassen.

Problematisch wird es beim Umbruch, da ist inline-block eine Alternative zu float

BTW: Es gibt keine CSS-Klassen, hat mir der Teufel gesagt, hat mir der Teufel gesagt

Matthias

[dave]

Hi,

gib allen einen linken Abstand, nur dem ersten nicht.

Das funktioniert nur solange es nicht mehr als 2 Zeilen werden.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

gib allen einen linken Abstand, nur dem ersten nicht.

Das funktioniert nur solange es nicht mehr als 2 Zeilen werden.

genau. Deshalb der Vorschlag mit inline-block.

Matthias

[Stefan]

genau. Deshalb der Vorschlag mit inline-block.

Hm... Inline-Block ist ne schöne Idee in Verbindung mit text-align:justify aaaaaber, die letzte Zeile macht einem einen Strich durch die Rechnung, da diese links ausgerichtet wird. text-align-last: justify; funktioniert zwar, ist aber CSS3 und wird nur im IE korrekt angezeigt :o(

Grüße,
Stefan

[Matthias Apsel]

Om nah hoo pez nyeetz, Stefan!

Hm... Inline-Block ist ne schöne Idee in Verbindung mit text-align:justify aaaaaber, die letzte Zeile macht einem einen Strich durch die Rechnung, da diese links ausgerichtet wird. text-align-last: justify; funktioniert zwar, ist aber CSS3 und wird nur im IE korrekt angezeigt :o(

direction: rtl;

Matthias

[Stefan]

direction: rtl;

Das dreht die Sache ja nur um, löst aber nicht das Problem, dass die letzte Zeile nicht auch gestreckt wird... :o(

[Matthias Apsel]

Om nah hoo pez nyeetz, Stefan!

direction: rtl;

Das dreht die Sache ja nur um, löst aber nicht das Problem, dass die letzte Zeile nicht auch gestreckt wird... :o(

Mit deiner Float-Lösung auch nicht. Deshalb bin ich nicht von einer Zentrierung ausgegangen.

Matthias

[Stefan]

Mit deiner Float-Lösung auch nicht. Deshalb bin ich nicht von einer Zentrierung ausgegangen.

Na gut... ist auch n Argument ;-)

[Stefan]

Um es zu verdeutlichen, was ich meine:

Die Liste ist wie im Bild aufgebaut. Das Problem ist in diesem Fall der rechte Rand, der nicht bündig mit der Linie darüber abschliesst/abschliesen kann...

[Matthias Apsel]

Om nah hoo pez nyeetz, Stefan!

Die Liste ist wie im Bild aufgebaut. Das Problem ist in diesem Fall der rechte Rand, der nicht bündig mit der Linie darüber abschliesst/abschliesen kann...

Ungetestet:

Gib den li den margin-right von 10px und der ul einen rechten Abstand von -10px.

Matthias