html - 如何让 -ms-grid 在 win8 html 和 javascript Metro 应用程序中自适应宽度布局？

Question

我的代码都在 default.html 中，html 是：

<div id="content">
    <div class="group" id="left">
            <div>Left_1</div>
            <div>Left_2</div>
            <div>Left_3</div>
            <div>Left_4</div>
            <div>Left_5</div>
    </div>
    <div class="group" id="center">
            <div>Center_1</div>
            <div>Center_2</div>
            <div>Center_3</div>
    </div>
    <div class="group" id="right">
            <div>Right_1</div>
            <div>Right_2</div>
    </div>
</div>

而CSS是：

body {
    font-size:20px;
}

#content {
    display:-ms-grid;
    -ms-grid-rows:1fr;
    -ms-grid-columns:auto auto auto;
    height:100%;
}

.group {
    margin-right:20px;
}

#left {
    -ms-grid-column:1;
}

#center {
    -ms-grid-column:2;
}

#right {
    -ms-grid-column:3;
}

.group div {
    width:300px;
    height:300px;
    background:#888;
    margin:10px;
    text-align:center;
}

结果是：

但我需要的是：

如何修改css？谁能帮帮我？

Answer 1

你应该使用 flexbox：

.container 
{
    display: -ms-flex;
    -ms-flex-direction: column;
}

然后把你的物品放在那个容器里，你们应该都很好。

我肯定会建议在仅限 Metro 的应用程序中使用 flexbox over table-cell。

flexbox 布局有很多额外的选项，这可能会变得非常复杂。请参阅此处进行动手操作（请务必在 IE10 中查看），并在此处获取更多文档。

Answer 2

您应该能够通过使用其 Layout 设置为 GridLayout 的 ListView 来实现所需的布局。列表视图的信息在这里http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

查看 Visual Studio 2012 中 Javascript 部分下的 Grid App 模板（当您选择 File -> New Project 时）以获取示例。

Answer 3

我通过使用 flexbox 解决了这个问题：

.group {
    display:-ms-flexbox;
    -ms-flex-align:center;
    -ms-flex-pack:start;
    -ms-flex-direction:column;
    -ms-flex-wrap:wrap;
}

Answer 4

Flexbox 确实为您提供了这一点，但需要您使用 winjs 列表视图重新连接您开箱即用的所有行为......（页面导航、点击事件、数据绑定等）

Gridview 不允许您水平显示数据。

Answer 5

见http://jsfiddle.net/zuB3k/

如果您使用display:-ms-grid的是仅受 IE 10 支持的 ，您可以使用display:tableand display:table-cell，它遵循 w3c 标准并且从版本 8 开始受支持。

body {
    font-size:20px;
}

#content {
    height:100%;
    display:table;
    width:100%;
}

.group {
    display:table-cell;
    padding-right:20px;
    vertical-align:top;

}

.group div {
    width:100px;
    height:100px;
    background:#888;
    margin:10px;
    text-align:center;
    float:left;
}