CSS: Rutnät med olika höjd på rutor?

Tråden skapades och har fått 3 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Boden
  • 2013-09-18 15:09

Hej.

Jag försöker få till ett rutnät där de olika rutorna har olika höjd. Lite svårt att förklara, ta en titt här för exempel på vad jag vill åstadkomma: http://themaxdavisthemes.com/themes/t/neptune.

Rutorna är div element, och genom att ge dem float: left; får jag dem att lägga sig brevid varandra, men rutor till vänster om en högre ruta lägger sig inte under rutan över. Ta en titt på bifogad screenshot. Jag vill att exempel 5 ska hamna under exempel 1 utan det stora mellanrummet. Är detta möjligt via CSS?

Tack på förhand

<html>
<head>
	<style type="text/css">
		.col{width:150px; border:1px solid red; float:left; }
	</style>
</head>
<body>
		<div class="col">
			<div style="height:200px; border:1px solid blue">bild</div>
			<div style="height:20px; border:1px solid blue">bild</div>
			<div style="height:100px; border:1px solid blue">bild</div>
			<div style="height:80px; border:1px solid blue">bild</div>
		</div>
		<div class="col">
			<div style="height:100px; border:1px solid blue">bild</div>
			<div style="height:80px; border:1px solid blue">bild</div>
			<div style="height:200px; border:1px solid blue">bild</div>
			<div style="height:20px; border:1px solid blue">bild</div>
		</div>
		<div class="col">
			<div style="height:200px; border:1px solid blue">bild</div>
			<div style="height:20px; border:1px solid blue">bild</div>
			<div style="height:100px; border:1px solid blue">bild</div>
			<div style="height:80px; border:1px solid blue">bild</div>
		</div>

</body>
</html>

Eftersom dina bilder verkar vara av samma bredd så skall detta funka.
Jag har helt enkelt delat upp sidan i tre kolumner. Där kan du lägga div'ar av olika höjd.
Du får ta bort stylen på div'arna i kolumnerna och färgerna. Dessa är bara för att visa hur det funkar.

- jonah

Senast redigerat 2013-09-19 14:40

Utan att dela upp det i kolumner, som @jonahcarneskog föreslår, är det inte möjligt. I så fall kan det vara läge att titta på till exemepel http://isotope.metafizzy.co som kan tillföra lite funktionalitet utöver css i det här fallet.

Använd javascript. http://masonry.desandro.com

1
Bevaka tråden