確保垂直內容水平溢出

TL; DR：嘗試水平溢出垂直塊，類似於Windows「metro」接口。彩色塊應保持垂直對齊，除非它們不適合，在這種情況下，它們應該溢出到一個新的列中（塊的佈局將水平增加，因爲垂直尺寸減小）。確保垂直內容水平溢出

目前，我已經創建了一個顯示以下內容的HTML頁面：

Initial HTML

這裏面的標記，在下列因素出現：

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div>

我試圖定義CSS規則是這樣的，當「容器」div被調整大小時，彩色塊會水平溢出，如下圖所示：

Result of CSS

這是可能的使用純CSS/SCSS？我需要使用JavaScript還是動態創建新元素？

我已經嘗試使用以下SASS規則來顯示這樣的佈局，但無濟於事：https://gist.github.com/psgs/cd87a1b3e70b35e264ec

非常感謝，
PSGS

來源

2015-06-11 psgs

我刪除了我的答案，我不知道如何用CSS做這件事，但是你可以定義用javascript來做，CSS解決方案當然是最好的。 –

好的。謝謝你的時間克里斯托弗：D – psgs

如果你的塊向左浮動（float:left），然後作爲你增加div的寬度，塊應該自動地向右移動，或者如你所說，應該水平地溢出。

來源

2015-06-11 09:49:53

嗨Rupesh，謝謝你的回答。不幸的是，這不是我想要達到的。如果可能的話，彩色塊應保持垂直對齊，除非它們不適合，在這種情況下，它們應溢出到新的色譜柱中。正如@ christopher-karlsson所說，隨着垂直尺寸的減小，塊的佈局將水平增加。 – psgs

確保垂直內容水平溢出

回答

相關問題