html - 如何使用 HTML5、WinJS 在 MetroApps 的垂直列中排列列表视图？

Question

我有一个 Metro 应用程序，其中包含 2 个列表视图和一些列表项。这两个列表视图默认情况下一个在另一个之下，每次当我向我的页面添加一个列表视图时，都会在另一个之下显示一个。问题是我不想水平显示这些列表视图。我希望它们并排显示。那么，任何人都可以帮助我如何并排排列具有 Metro 应用程序外观的列表视图。

谢谢你。

Answer 1

CSS

.ms-grid
{
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr 1fr;
}

HTML

<div class="ms-grid">
    <div data-win-control="WinJS.UI.ListView"></div>
    <div data-win-control="WinJS.UI.ListView" style="-ms-grid-column: 2;"></div>
</div>