HTML/CSS: Mehrere Bilder rechts und links anordnen

[LoRDxRaVeN]

Hallo Leute!

Ich bin gerade dabei einen kleinen Teil eines (ich nenne es mal) CMS für die von uns benötigten Anforderungen anzupassen und scheitere, zu meiner Schande, schon an einer Kleinigkeit bzw. an meinen speziellen Vorstellungen. Bilder sagen glaube ich mehr als 1000 Worte:

Der erste Screenshot ist schon sehr nahe an meiner Wunschvorstellung. Einziges Problem: Der Abstand zwischen dem erstem und zweitem Bild auf der rechten Seite, da sich das zweite Bild auf der rechten Seite nach dem ersten Bild auf der linken Seite orientiert.
Der Code sieht dabei sinngemäß wie folgt aus:

<img src="links1" style="float: left;">
<img src="rechts1" style="float: right;">
<img src="links2" style="float: left; clear: left;">
<img src="rechts2" style="float: right; clear: right;">
<img src="links3" style="float: left; clear: left;">
<img src="rechts3" style=" float: right; clear: right;">

Gibt es also eine Möglichkeit, dass sich das zweite Bild auf der rechten Seite auf das erste Bild auf der rechten Seite ausrichtet und nicht auf das erste Bild auf der linken Seite, sodass kein Abstand ist?

Eine Möglichkeit, die zwar dieses Problem löst, mir aber nicht so gut gefällt, weil die Bilder nicht einzeln umflossen werden, wäre jeweils die linken und die rechten Bilder in einen Container einzuschließen:

<div style="float: left;">
  <img src="links1" style="float: left;">
  <img src="links2" style="float: left; clear: left;">
  <img src="links3" style="float: left; clear: left;">
</div>
<div style="float: right;">
  <img src="rechts1" style="float: right;">
  <img src="rechts2" style="float: right; clear: right;">
  <img src="rechts3" style=" float: right; clear: right;">
</div>

Eigentlich ist mir gar nicht klar, warum sich bei der ersten Variante das zweite Bild auf der rechten Seite nach dem ersten Bild auf der linken Seite ausrichtet...

Vll. hat jemand eine saubere Lösung?

Ich danke im Vorhinein!

LG Markus

PS: Die einzelnen Bilder können jeweils völlig unterschiedlich ausgerichtet sein, (Hochformat/Querformat), die Maximale Größe ist aber auf 150px beschränkt.

 

[Antarctica]

Du müsstest im CMS-Programmcode für alle Bilder ausrechnen wie groß sie sind und sie entsprechend im HTML-Quellcode anordnen.

Folgendes sollte nämlich richtig aussehen:

<img src="links1" style="float: left;">
<img src="rechts1" style="float: right;">
<img src="rechts2" style="float: right; clear: right;">
<img src="links2" style="float: left; clear: left;">
<img src="rechts3" style=" float: right; clear: right;">
<img src="links3" style="float: left; clear: left;">

 

[Darkwolf]

Funktioniert das so?
ich hätte spontan versucht, erst Die 3 Bilder links und dann die 3 Biulder rechts einzubinden, jeweils mit einem <br /> getrennt. Mit dem clear ist aber sauberer gelöst.

Sorry 4 OFF-Topic, aber vielleicht ist Dir das für die zukunft hilfreich.

http://www.loremipsum.de/

Lorem Ipsum (-Wikilink) ist ein Dummy Text zum ausfüllen von "leerem" Inhalt

 

[OBrian]

boah, fette PNGs und das bei Imageshack, dem lahmsten Bilderhoster überhaupt... Ist jetzt egal, aber denk mal beim nächsten Mal dran, Fotos möglichst als JPG und woanders hosten

Das Sortieren kannst Du Dir aber sparen, wenn der Autor des jeweiligen Textes einfach kontrolliert, wo die Bilder hinkommen, er kann sie ja einfach irgendwo in den Text setzen. Direkt untereinandergequetscht sehen Bilder eh nicht gut aus.

<div style="background-color:#008855; width:500px; padding:10px; font:12px arial; color:white; text-align:justify">

<h2>Lorem ipsum...</h2>

<div style="background-color:#ffff88; width:180px; height:100px; margin-right: 10px; float:left; clear:left;"></div>
<div style="background-color:#ff88ff; width:130px; height:120px; margin-left: 10px; float:right; clear:right;"></div>

<p>... dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
<div style="background-color:#8f8fff; width:170px; height:175px; margin-right: 10px; float:left; clear:left;"></div>

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
<div style="background-color:#8fff8f; width:105px; height:180px; margin-right: 10px; float:left; clear:left;"></div>
<div style="background-color:#8f8f8f; width:150px; height:130px; margin-left: 10px; float:right; clear:right;"></div>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. 
<div style="background-color:#ff8f8f; width:135px; height:110px; margin-left: 10px; float:right; clear:right;"></div>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
<div style="background-color:#88ffff; width:115px; height:250px; margin-right: 10px; float:left; clear:left;"></div>

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.   

</p>
</div>

(man sollte wohl sinnvollerweise noch margin-top und margin-bottom setzen)


Vielleicht fällt jemandem noch was mit dem CSS3-Flexbox-Modell ein, falls Du Dich bei Deiner Besucherschaft auf moderne Browser verlassen kannst. Bin ich jetzt zu müde für.

 

[enfoixo]

Du kannst doch die Bilder mit Text in einem div platzieren und dann mit floating arbeiten. Das müßte doch eigentlich gehen und der Text "fließt" dann um die Bilder. Als breite gibt du 100% an und für die Bilder kannst du z.B. 30% angeben. Dann skaliert auch alles automatisch. Müßte doch so funktionieren oder nicht ?!

 

[Antarctica]

Du kannst doch die Bilder mit Text in einem div platzieren und dann mit floating arbeiten. Das müßte doch eigentlich gehen und der Text "fließt" dann um die Bilder. Als breite gibt du 100% an und für die Bilder kannst du z.B. 30% angeben. Dann skaliert auch alles automatisch. Müßte doch so funktionieren oder nicht ?!

Kleiner Tipp fürs nächste Mal: (a) Probier es selbst aus, wenn du dir nicht sicher bist. (b) Poste den Code.

"Mit floating arbeiten" kann nämlich alles bedeuten...