logo
  Kolommen
 

List-kolommen:

  • een
  • twee
  • drie
  • vier
  • vijf
  • zes
  • zeven
  • acht
  • negen
Of een list met 5 kolommen kan ook...
  • een
  • twee
  • drie
  • vier
  • vijf
  • zes
  • zeven
  • acht
  • negen
  • tien

 
IN DE CSS
ul {
width:300px;
margin-bottom:20px;
overflow:hidden;
border-top:0px solid #ccc;}
li {
line-height:20px;
border-bottom:1px solid #bbbb00;
float:left;
display:inline;}
.col2 li { width:50%;}
.col3 li { width:33.333%; }
.col4 li { width:25%; }
.col5 li { width:20%; }
.col6 li { width:16.666%; }

 
TUSSEN DE BODY TAGS
<ul class="col5">
<li>een</li>
<li>twee</li>
<li>drie</li>
<li>vier</li>
<li>vijf</li>
<li>zes</li>
<li>zeven</li>
<li>acht</li>
<li>negen</li>
<li>tien</li>
</ul>

  Het sommetje is dus heel eenvoudig wil je 2 rijen dan deel je 100 (100%) door 2 en dan heb je 50% (.col2). Wil je een rij van 7 hebben, dan deel je 100 door 7 en dan heb je 14.285% (.col7)
 
eind