Produkte in Produktliste nebeneinander darstellen

Hallo

Ich habe gerade begonnen mit isotope zu experimentieren. Meine Erfahrung in Bezug Isotope ist also noch ziemlich überschaubar ;-) .
Nun steh ich aber vor einem kleinen Problem, wo ich nicht weiter komme.
Meine Artikel werden in der Artikelliste alle untereinander dargestellt. Wie bekomm ich es denn hin das ich z.B. 4 oder 5 Artikel in der Artikelliste
nebeneinander darstellen kann? Ist jetzt bestimmt peinlich, aber es will einfach nicht.
Wäre toll wenn jemand da eine Idee hätte.

Beste Grüße, Andi

(Screenshot häng ich mit dran)

Ne spontane Lösung habe ich nicht, aber es gibt ja hier einige verlinkte Beispiele zu sehen, z.B. das hier:
http://elolivar.de/Essig.html

Kannst Du da über Firebug oder ähnliches nicht was rausfinden?

Auch hier sind die Artikel nebeneinander aufgelistet....
https://www.contao-themes-shop.de/contao-themes.html

Gruß manfred

Am einfachsten ist mit float:left und ner Breite, besonders, wenn du den Elementen ne feste Höhe zuweist. Ohne feste Höhe kannst du auch das erste in der Reihe clearen mit clear:both.

Was aber auch Spaß macht ist mit Flexbox, war grad gestern wieder Thema. Das hier ist ganz witzig zum Lernen http://flexboxfroggy.com/#de

Hallole

Erst mal danbke für die schnelle Reaktionen. schön das es auch wirklich aktive Foren gibt ;-)

@Manfred
Das mit Firebug hab ich leider schon versucht, aber komm dabei nicht wirklich auf nen Gedanken der mich da weiterbringt. Trotzdem eine gute Shop Seite die mir als Anregung bestimmt so einiges geben wird :-). Vielen Dank

@Andreas
wie genau mach ich das mit dem floating? Und übrigens geniale Sache um sich in css zu üben...danke für den Link

Grüße Andreas

Code:

---

mod_iso_productlist .product {
    float: left;
    height: 600px;
    margin: 0 30px 0 0;
    width: 264px;
}

---

Margin-right (0 30px 0 0) kann unsauber ausehen, weil du dann rechts einen Abstand hast, bei width kannst du zB. 25% nehmen, wenn du nicht rechnen möchtest. Genauere Hilfe kann ich erst geben, wenn du einen Link auf das Problem zeigst.

Ach so, meintest du mit "floating" das mit den Flexboxen? Weil du meinen Link ansprichst? Wenn ja, dann müsstest du dich evtl. tiefer in Flexboxen einlesen. Hier ist ein recht guter, wenn auch nicht perfekter, Flexbox-Generator, durch dessen Benutzung man das recht schnell lernen kann http://the-echoplex.net/flexyboxes/

Basics:

HTML-Code:

---

<div style="display:flex;" class="flex-container">

  <div class="flex-item">
    Weil mein Elternelement display:flex gesetzt ist,
    bin ich automatisch ein Flex-Item mit den <strong>Default-Eigenschaften</strong>.
    Ich werde mit meinen Geschwistern in einer Reihe angezeigt
    und nicht umgebrochen, wenn wir zu breit sind.
    Wir haben alle die gleiche Höhe.
  </div>

  <div class="flex-item">
    Ich auch.
  </div>

  <div class="flex-item">
    Ich auch.
  </div>

</div>

---