的Windows 8風格的ListView的網絡

我希望能夠在Windows 8列表視圖顯示在尋求電網項目等。項目將是正方形（瓷磚）。的Windows 8風格的ListView的網絡

我可以讓他們通過創建div的坐同一行上顯示這樣的。

項1項2項3

項目4項5項6

但我想他們以顯示這樣

項目1項目3項目5

項目2項目4項目6

我不知道是否有人知道如何做到這一點。

來源

2013-01-21 user1492867

這兩個有什麼不同？ –

我覺得他想通了 – kennypu

對不起，我忘了改變它。 – user1492867

我這裏有JsBIN

有了這個演示演示，我們設置每個li項目的JavaScript中的width和height和height或CSS列表max-height。

來源

2013-01-21 21:44:17

謝謝你的回答。它爲我工作。我選擇了Jeremy Foster的，因爲我認爲它會提供更廣泛的兼容性。 – user1492867

IE10引擎與Windows 8使用的引擎相同，但Windows 8應用程序中使用的ListView控件是在WinJS框架外部不可用的自定義控件。該引擎確實實施了CSS flexbox standard並詳述了它here。 Flexbox的跨瀏覽器支持非常好（請參閱here）。 Flexbox包含垂直佈置元素和包裝的功能。這兩件事的結合將會實現你正在尋找的東西。像這樣的東西（我會免費給你所有的供應商的前綴，只是使用-ms版本）：

<!-- HTML snippet --> 
<div class="parent"> 
    <div>item 1</div> 
    <div>item 2</div> 
    <div>item 3</div> 
    <div>item 4</div> 
    <div>item 5</div> 
    <div>item 6</div> 
</div> 

/* CSS snippet */ 
.parent { 
    display: -ms-flexbox; 
    -ms-flex-wrap: wrap; 
    -ms-flex-direction: column; 
    height: 300px; /* adjust to create the two rows you're looking for */ 
} 

.parent > div { 
    /* you may want to set some flex properties on the children here */ 
}

來源

2013-01-22 15:27:40

的Windows 8風格的ListView的網絡

回答

相關問題