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

Tråden skapades 2013-09-18 och har fått 3 svar. Det senaste inlägget skrevs 2013-10-18.

1

2013-09-18 15:09

#1

jensm
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

Anmäl Ändra Gilla Svara

2013-09-19 08:50

#2

jonahcarneskog
Medlem ●
2013-09-19 08:50

<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

Anmäl Ändra Gilla Svara

2013-09-26 23:14

#3

augustekman
Medlem ●
Stockholm
2013-09-26 23:14

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.