如何保留前6個元素的默認浮點值，並讓剩下的元素左移？

我正在將PSD模擬轉換爲HTML和CSS，現在我卡住了一下。我相信你們中的大多數都面臨非常類似的問題，因爲這種類型的演示在網絡中非常流行。如何保留前6個元素的默認浮點值，並讓剩下的元素左移？

正如你可以在頁腳的圖像上看到的，我試圖用一個塊代表元素。我想這個塊看起來是這樣的：

<nav> 
    <ul> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     ...The rest ... 
    </ul> 
</nav>

而這就是問題所在。我不能把這一切放到一塊。

我目前有5個不同的（在5個不同的navs與ul元素）塊和所有的作品。但是爲後端開發者提供內容會非常痛苦（迭代！） - 這就是我想把它們全部放在一個塊中的原因。

enter image description here

這甚至可能嗎？到目前爲止我找不到任何有用的東西

來源

2015-04-06 Yang

是的，這是CSS列。 – dfsq

@dfsq是的我以前也聽說過，但找不到任何有用的東西。你能提供一個例子或鏈接嗎？ – Yang

這將是很好，有你已經嘗試的全套HTML和CSS。您可以使用Stack Snippets功能將其包含在問題中。 –

這裏的正確使用是CSS列。

瀏覽器兼容性：現代瀏覽器和IE10 + http://caniuse.com/#feat=multicolumn

.columns { 
 
    -webkit-column-count: 5; 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-count: 5; 
 
    -moz-column-gap: 10px; 
 
    column-count: 5; 
 
    column-gap: 10px; 
 
}

<div class="columns"> 
 
    <p><a href="#">Rome, Italy</a></p> 
 
    <p><a href="#">Paris, Frace</a></p> 
 
    ... The rest ... 
 
</div>

來源

2015-04-06 21:08:39 Kay

你可以拿走那個清單，並在每5個項目之後中斷。

HTML：

<nav> 
    <ul> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
     <li><a href="#">Rome, Italy</a></li> 
     <li><a href="#">Paris, Frace</a></li> 
    </ul> 
</nav>

CSS：

nav ul { 
    list-style: none; 
    list-style-type: none; 
} 

nav ul li { 
    display: inline; 
} 

nav ul li:nth-of-type(5n):after { 
    display:block; 
    content:""; 
}

DEMO：JSFiddle

來源

2015-04-06 21:04:26

爲了記錄，這部分支持IE8 - http://caniuse.com/#search=%3After –

如何保留前6個元素的默認浮點值，並讓剩下的元素左移？

回答

相關問題