Jag får väl besvara mig själv då ;) Det slutar nog med att jag använder JQuery och pluginen JQuery Masonry, http://desandro.com/resources/jquery-masonry/ Kanske kan vara till hjälp för någon annan också.
/Egge
Frågan#1
Hej,
Jag har en sida som består av olika "block" som är gjorda med DIV. Med en stor bred skärm ska de flyta ut i sidled och på så sätt skapa så många kolumner som möjligt. För att sedan fortsätta på raden under.
Bra så långt det är ju inga problem. Men det trubbel jag stöter på är att när blocken är olika höga (pga dess innehåll) så blir layouten av dem inte riktigt vad jag vill, då den div som "hoppar ned" liksom "fastnar" till höger om den div i första raden som är högst pga dess innehåll.
Ett enkelt test:
<html>
<head>
<title>Test</title>
<style>
.block { float: left; background: #eee; margin: 6px; padding: 7px; }
</style>
</head>
<body>
<div class="block">
<h2>this is block 1</h2>
<div class="blockcontent">
block modmodmodmod
</div>
<div class="blockcontent blockfooter">
this is the block footer
</div>
</div>
<div class="block">
<h2>this is block 2</h2>
<div class="blockcontent">
block modmodmodmod
<br/>
lblablababla
</div>
<div class="blockcontent blockfooter">
this is the block footer
</div>
</div>
<div class="block">
<h2>this is block 3</h2>
<div class="blockcontent">
block modmodmodmod
</div>
<div class="blockcontent blockfooter">
this is the block footer
</div>
</div>
<div class="block">
<h2>this is block 4</h2>
<div class="blockcontent">
block modmodmodmod
</div>
<div class="blockcontent blockfooter">
this is the block footer
</div>
</div>
<div class="block">
<h2>this is block 5</h2>
<div class="blockcontent">
block modmodmodmod
</div>
<div class="blockcontent blockfooter">
this is the block footer
</div>
</div>
</body>
</html>
Testa detta i en läsare och gör den smalare och smalare en kolumn i taget (efter att du haft 5 kolumner i bredd) så förstår du vad jag menar.
Vad jag vill är att vid 4 kolumners bredd ska block 5 hamna direkt under block 1, vid 3 kolumners bredd ska block 4 hamna under block 1 och block 5 under block 2, osv, med konstant marginal mellan dem i höjdled, dvs blocken på rad 2 ska inte linjera med varandra i höjd.
Jag har en känsla av detta inte är helt enkelt att lösa utan javascript?
Kika på http://sjoraddning.se/ för att se hur jag vill att det ska fungera med själva blocken.
Alla tips är välkomna. Tack på förhand.
/Egge
