Naar boven toe aansluiten

Door gerhard l op 27-09-2012 19:34

1.969 views

Goedenavond,

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

Jaron T

27-09-2012 21:31

Geen ul en li gebruiken om dit te bereiken.. waarom niet gewoon een table of een div? UL en LI worden hier onjuist gebruikt.

David M

27-09-2012 21:57

html:


<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>

cms:


.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;
}

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.

[size=xsmall]Toevoeging op 27/09/2012 21:58:02:[/size]

ehh cms...ik bedoel css

[size=xsmall]Toevoeging op 27/09/2012 22:04:22:[/size]

ehh cms...ik bedoel css

Wouter J

27-09-2012 22:36

David, heb je uberhaupt wel getest of het werkt? Het werkt namelijk echt niet... Allereerst is de header een ID en geen class en als 2e kan je zoiets niet met CSS, tenzij je met kolomen ipv rijen gaat werken en een beetje hulp van JavaScript gebruikt.

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.

g gerhard l

27-09-2012 22:44

@Jaron Je hebt gelijk dit hoort niet in <ul>, ik probeerde van alles wat.
@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!

Wouter J

27-09-2012 22:51

Gerhard, zoiets hoort zeker wel in een lijst! Het is een lijst van ...? (weet niet wat je erin gaat stoppen) Misschien dat er in het item een div zit, of iets meer semantisch zoals een article, maar een lijst eromheen moet sowieso.

David M

28-09-2012 18:48

@ Wouter, je hebt gelijk ik had de vraag niet goed begrepen.

Reageren

Inloggen om te reageren