的Windows 8风格的ListView的网络

Question

我希望能够在Windows 8列表视图显示在寻求电网项目等。项目将是正方形（瓷砖）。

我可以让他们通过创建div的坐同一行上显示这样的。

项1项2项3

项目4项5项6

但我想他们以显示这样

项目1项目3项目5

项目2项目4项目6

我不知道是否有人知道如何做到这一点。

Answer 1

我这里有JsBIN

有了这个演示演示，我们设置每个li项目的JavaScript中的width和height和height或CSS列表max-height。

Answer 2

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 */ 
}