foto html - css     . Div's - Kolommen

Omschrijving   Voorbeeld

Met div kan je ook kolommen maken en vreemd genoeg op een hele mooie manier. Je hoeft maar een tekst te schrijven die er uitziet zoals dit, maar dan automatisch in kolommen over gaat. Je hoeft niet meer te kijken van hoeveel tekst kan er in die kolom en hoeveel in die... nee... alles gebeurd gelijkmatig.
Bij 'columns' in de css zet je de hoeveelheid kolommen neer en bij column-gap de afstand tussen de kolommen.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In de css

.glijk {
text-align:justify;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;}

Tussen de bodytags

<div class="glijk">
tekst
</div>

Omschrijving   Voorbeeld

Wil je er lijnen tussen, dat kan ook. Zet er dan dit stukje bij; -webkit-column-rule: 1px outset #ff00ff;
-moz-column-rule: 1px outset #ff00ff;
column-rule: 1px outset #ff00ff;
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

end
terug
home