Как отображать две колонки блоков с CSS

Question

Я должен создать две колонки блоков с CSS из следующего HTML-кода:

<nav> 
    <a href="http://www.link1.net/">Link 1</a> 
    <a href="http://www.link2.org/">Link 2/a> 
    <a href="http://www.link3.com/">Link 3</a> 
    <a href="http://www.link4.net/">Link 4</a> 
    <a href="http://www.link5.net/">Link 5</a> 
    <a href="http://www.link6.org/">Link 6</a> 
    <a href="http://www.link7.org/">Link 7</a> 
    <a href="http://www.link8.org/">Link 8</a> 
</nav> 

Две колонны должны выглядеть так:

Link1 Link2 

Link3 LInk4 

Link5 Link6 

Link7 LInk8 

блоков имеют фиксированную ширину 300 пикселей и фон color #808080. Кто-нибудь знает, как это сделать? Я был бы очень благодарен.

Answer 1

nav { 
 
    width: 600px 
 
} 
 
a { 
 
    float: left; 
 
    width: 300px; 
 
    color: #808080; 
 
}

<nav> 
 
    <a href="http://www.link1.net/">Link 1</a> 
 
    <a href="http://www.link2.org/">Link 2</a> 
 
    <a href="http://www.link3.com/">Link 3</a> 
 
    <a href="http://www.link4.net/">Link 4</a> 
 
    <a href="http://www.link5.net/">Link 5</a> 
 
    <a href="http://www.link6.org/">Link 6</a> 
 
    <a href="http://www.link7.org/">Link 7</a> 
 
    <a href="http://www.link8.org/">Link 8</a> 
 
</nav>

Answer 2

Вариант с CSS3 и pseudoselector-го ребенка - не имеет значения, ширина которых.

nav a:nth-child(2n) { 
    clear:none; 
    display:block; 
} 

nav a:nth-child(2n+1) { 
    float:left; 
} 

JSFiddle