如何讓winms html和javascript metro app中的-ms-grid自適應寬度佈局？

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的：

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

Answer 2

見http://jsfiddle.net/zuB3k/

如果使用display:-ms-grid，僅由IE 10的支持，您可以使用display:table和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; 
} 

Answer 3

你應使用flexbox：

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

然後將您的物品放入該容器中你應該都很好。

我肯定會推薦在您的metro-only應用程序中使用flexbox over table-cell。

Flexbox佈局還有很多其他選項，可能會變得非常複雜。請參閱here以獲取更多文檔（請務必在IE10中查看）和here。

Answer 4

您應該可以通過使用ListView及其佈局設置爲GridLayout來實現所需的佈局。關於列表視圖的信息在這裏http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

簽出Visual Studio 2012中Javascript部分下的Grid App模板（當您選擇File - > New Project）作爲示例時。

Answer 5

Flexbox的不給你這個，但需要通過使用winjs列表視圖重新連接你得到的開箱即用的行爲......（頁面導航，點擊事件，數據綁定等）

Gridview不會讓你的數據呈現水平。