Naar boven toe aansluiten
Ik ben op zoek naar een trucje om <li>'s of <div>'s naar boven toe aan te sluiten, dit klinkt niet heel duidelijk en ik wist daarom ook niet waar ik op moest zoeken.
Ik heb een voorbeeldje gemaakt op fiddle. Je ziet daar allemaal test blokjes, de bedoeling is dat wanneer de blokjes beginnen op de tweede regel dat deze aansluiten naar boven, nu is het zo als 1 bericht langer is dan zal de volgende regel ook een stuk lager beginnen.
Is dit mogelijk met CSS? Als m'n vraag niet duidelijk is, hoor ik dat graag dan zal ik een ander voorbeeld opzoeken.
Groet Gerhard
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrapper">
<ul>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
</ul>
<ul>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>tesfsdfdsfdsfdsfsdf sdfidsuhf kjsfdh kjdsfhgkfdj hkjfdh gkjdfhg kjdfhgjk hdfkjg hfd kjghdfkjghdfkj hg st</li>
</ul>
cms:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper{
margin: 0 auto;
width: 960px;
height: 800px;
background-color: green;
}
.wrapper ul li{
width:260px;
float:left;
background-color: white;
padding: 20px;
margin: 10px;
}
margin: 0 auto;
width: 960px;
height: 800px;
background-color: green;
}
.wrapper ul li{
width:260px;
float:left;
background-color: white;
padding: 20px;
margin: 10px;
}
Je margin:10px; zorgt ervoor dat je rondom een ruimte hebt tussen de cellen. Als je deze 0 maakt sluiten ze in de hoogte aan. de breedte klopt dan niet meer van de cellen.
Toevoeging op 27/09/2012 21:58:02:
ehh cms...ik bedoel css
Toevoeging op 27/09/2012 22:04:22:
ehh cms...ik bedoel css
Kris, toen ik jouw probleem las dacht ik meteen aan pinterest en na wat onderzoeken kwam ik op deze stackoverflow question uit met het antwoord: De makkelijkste manier is door het gebruiken van de jQuery Masonry plugin.
@Wouter Zoals Pinterest het heeft is precies wat ik bedoel, ik kon er even geen goed voorbeeld van vinden! Deze plugin ga ik zeker uittesten, erg bedankt!