div nebeneinander ohne float

[derpaddel]

ich stehe gerade auf dem schlauch...

ich will n-Bilder in n/3 Spalten mit je 3 zeilen darstellen...

|_1_|_4_|_7_|n-8|___|___|
|_2_|_5_|_8_|___|___|n-1|
|_3_|_6_|_9_|___|___|_n_|
|<|____| |____________|>|

ausgabe erfolgt via php, das problem liegt jetz im css für die div´s

#container-der-nur-horizontal-scrollt
{
white-space:nowrap; 
overflow-x: scroll; 
overflow-y: hidden; 
width:300px; 
height:300px;
}

<div id="container-der-nur-horizontal-scrollt">
 <div class="spalte">
   <div class="bild">
     <img src="bild1" .../>
   </div>
   <div class="bild">
     <img src="bild2" .../>
   </div>
   <div class="bild">
     ...
   </div>
  </div>
  <div class="spalte">
    ...
  </div>
  <div class="spalte">
    ...
  </div>
  ...
</div>

irgendwie bekomm ich es nicht hin, entweder sind alle bilder in einer zeile oder alle untereinander. hab mein css jetz komplett gekillt

kann mir jemand auf die sprünge helfen welche angaben ich für .spalte und .bild machen muss? float kann ich (denke ich) nicht benutzen da der Inhalt dann nach unten gestreckt wird und nicht seitlich. es soll ja ein horizontal scrollender div sein.

hoffe es ist verständlich
danke

 

[WebMediaService]

AW: div nebeneinander ohne float

Hast du mal was von Grid 960 System gehört. das ist ganz einfach und simpel in der Anwendung und macht genau das, was du brauchst. Schau dir die Seite 960 Grid System an und das Tutorial - geht ganz einfach.

 

[vanilladragon]

AW: div nebeneinander ohne float

Hallo derpaddel,

es reicht nicht wenn du deinen divs einen float gibst. Du musst diese auch als Blockelement (display: block darstellen. Danach (wenn alle divs nebeneinander sind, die du haben willst) musst du das float wieder aufheben durch clear:both; . Das kannst du z.B. durch ein break machen, dessen du eine Klasse gibst.

vanilla

 

[Herr_D]

AW: div nebeneinander ohne float

?=¿


Im Grunde mußt du nur ein br einbauen... n/3 <br> ...ohne div-Salat...


css von oben... bildcode erspare ich mir zu tippen

<div id="container-der-nur-horizontal-scrollt">

<img1><img4>...<img n><br>
<img2><img5>...<img n+1><br>
<img3><img6><img n+2>

</div>