Umbruch von Elementen verhindern

[Tronjer]

Ich versuche hier gerade, ein responsives Carousel zu bauen, das mit dem Grid-Layout von Bootstrap harmoniert.

http://matthias-kalden.de/project_x2/index.php

Da der Container nicht breit genug ist, um alle Bilder nebeneinander anzuzeigen, werden sie in mehrere Zeilen umbrochen. Um das visuell auszugleichen, habe ich dem Container eine max-height und ein overflow: hidden gegeben. Problem ist, dass die verdeckten Bilder beim Verschieben der Elemente nicht automatisch in die erste Zeile rutschen.

Hätte jemand einen Tipp, wie ich diesen Umbruch verhindern kann, bzw. die Bilder aus dem Textfluss herausnehme und den umgebenden Container trotzdem responsive halte? Die Bilder müssen allerdings ein position: relative haben, damit sie sich im Carousel verschieben lassen.

 

[scbawik]

Mit CSS

white-space:nowrap;

wahrscheinlich schon versucht, oder?

Dann dürften (wenn mich nicht irre) aber keine Leerzeichen mehr zwischen den Bildern sein.

Grüße

 

[Tronjer]

Ja und nein.

whitespace: nowrap funktioniert, wenn ich nach den Anker-Tags keinen Zeilenumbruch mache, und das ergibt dann eine viel zu lange Zeile. Was ich möglichst vermeiden wollte.

 

[threadi]

Welche Anker-Tags? Wenn Du "white-space: nowrap;" in der ID #product-slider einfügst sieht es im Firefox ok aus.

 

[Tronjer]

War mein Fehler. Ich hatte das nowrap auf #product-slider a gelegt.

Wobei ich momentan an einer saubereren Lösung mit Ajax arbeite. Dabei werden immer nur soviel Bilder erzeugt, wie in den Slider passen. Ist perfekt responsive. Allerdings stören mich die Ladezeiten. Mal sehen, ob ich das noch besser hinbekomme. Ansonsten werde ich wohl auf nowrap zurückgreifen.