0

我是 Windows 8 开发的新手，正在走 Html/Javascript 路线。我已经开始使用 Grid 模板。

为什么当我添加时，

测试内容

..到正文中的内容区域html（不是项目模板html），当我启动项目时，文本测试内容是否不会显示在页面上？

前任。

    </head>


<div>Test Content</div>

<!-- The content that will be loaded and displayed. -->
<div class="groupdetailpage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>
        </h1>
    </header>
    <div>Test Content</div>
    <section aria-label="Main content" role="main">
        <div class="itemslist win-selectionstylefilled" title="Test Content" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
    </section>
</div>

4

1 回答 1

0

建议参考 default.css，并阅读网格布局（显示：-ms-grid）

.fragment {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

.groupdetailpage.fragment 采用 100% 的宽度、高度，因此片段外部的测试内容 div 不可见。

.fragment header[role=banner] {
    // since -ms-grid-row is not defined, this element takes row 1
    /* Define a grid with columns for the back button and page title. */
    -ms-grid-columns: 39px 81px 1fr auto;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
}

.fragment section[role=main] 
{
    -ms-grid-row: 2;
}

.groupdetailpage.fragment 有显示有 -ms-grid。因此，.header 和 section[role=main] 仅可见，它们分别占据第 1 行和第 2 行。

像这样更改部分将使测试内容 div 可见。

<section aria-label="Main content" role="main">
    <div>Test Content</div>
</section>

阅读网格布局会有所帮助，因为这是基于 winjs 的 Windows 商店应用程序开发的关键。

于 2013-05-18T07:10:26.397 回答