binolino: Mehrere Div-Boxen darstellen/ausblenden (Fenstergrößenabhängig)

Beitrag lesen

Hallo zusammen,

habe bei Amazon gesehen, dass die Produktanzahl auf der Startseite variiert je nachdem wie breit man sein Fenster zieht. Es sind mindestens 4 maximal aber 6 Produkte in einer Reihe zu sehen.

Das finde ich ziemlich cool finde aber keinen Ansatz, wie ich so eine Technik auch nutzen könnte.

Ich würde gerne meinen WordpressBlog in ähnlicher Weise gestalten, d. h. min einen Beitrag max. 3 nebeneinander, bei maximal 10 Beiträgen pro Seite.

Habe mir mal einen kleinen Testlauf geschrieben...

<HTML><HEAD>  
<style type="text/css">  
div { float:left;height:350px; width:450px; }  
</style>  
</HEAD><BODY>  
<DIV style="background-color:red"></DIV>  
<DIV style="background-color:blue"></DIV>  
<DIV style="background-color:orange"></DIV>  
<DIV style="background-color:green"></DIV>  
<DIV style="background-color:violet"></DIV>  
<DIV style="background-color:pink"></DIV>  
<DIV style="background-color:yellow"></DIV>  
<DIV style="background-color:lightgreen"></DIV>  
<DIV style="background-color:lightblue"></DIV>  
<DIV style="background-color:black"></DIV>  
</BODY></HTML>

Problem 1: Bei meiner Bildschrimauflösung (1920x1080) sind bei diesem Test allerdings 4 Boxen nebeneinander. Ein Div mit Max-Width 1350px außenrum bringt nicht das erhoffte Ergebnis. Wie stelle ich es an, dass nur 3 immer in einer Reihe sind bei dieser Auflösung?

Problem 2: Schiebe ich mein Fenster zusammen, so dass nur noch 3 Boxen nebeneinander zu sehen sind, erhalte ich 3 Reihen a 3 Boxen und eine Reihe mit nur einer Box. Kann man die letzte Reihe irgendwie verhindern? So dass Bei Darstellung von 3 Boxen nebeneinander nur 3 Reihen angezeigt werden (also 9 statt 10 Beiträge)?

Vielleicht hat jemand auch eine Idee wo ich mir was abkupfern könnte. Amazon hat ein wenig zuviel Code in ihren Seiten als das ich da wirklich einsteigen kann :)

Danke für eure Hilfe !

mfg, Binolino

P. S. Ich hoffe das passt in Design/Layout. Das Problem ist wohl nur mit Javascript und CSS zu lösen, aber im Grunde ist es ein Designproblem :)