1

我正在为 Windows 8 开发基于 JavaScript 的 Metro 应用程序。我正在尝试设置具有多列文章的容器背景。基本上，我在左侧有一个列表视图，在右侧有一个多栏文章（类似于拆分视图）。

我正在尝试将文章流设置为水平（使用 column-width CSS 属性的多列），但是当我设置文章的背景时，它只设置到视口边缘。

使用 Split App 模板创建新项目，并将以下 HTML替换为split.html 中的当前 HTML（内部正文标记）：

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-info">
        <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        <h4 class="item-description" data-win-bind="textContent: description"></h4>
    </div>
</div>

<!-- The content that will be loaded and displayed. -->
<div class="my-page fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>  
        </h1>
    </header>
    <div class="itemlist-section" aria-label="List column">
        <div class="itemlist" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', tapBehavior: 'toggleSelect' }"></div>
    </div>
    <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
        <div class="text">
            <div class="title win-type-ellipsis" data-win-bind="textContent: title"></div>
        </div>

        <div class='article'>
            <img class="article-image" src="#" data-win-bind="src: imageUrl; alt: title" />
            <div class="article-content" data-win-bind="innerHTML: content"></div>
        </div>
    </div>
</div>

将 split.css 文件的内容替换为以下内容：

.my-page {
   -ms-grid-columns: 456px 1fr;
   display: -ms-grid;
   width: 100%;
   overflow-x:auto;
}
.my-page .itemlist-section {
   -ms-grid-row: 2;
   margin-left: 106px;
   margin-right:10px;
}
.my-page .itemlist-section .itemlist .win-item {
   height:120px;
}
.my-page .articlesection {
   -ms-grid-column: 2;
   display:-ms-grid;
   -ms-grid-rows:80px 1fr;
   -ms-grid-row: 2;
   margin-left: 0px;
   height: 600px;
   width:auto;
   background-color:rgba(254, 247, 235, 0.6);
   padding:30px 50px 25px 50px;
}
.my-page .articlesection .article {
   -ms-grid-row:2;
   display:-ms-grid;
   -ms-grid-columns:auto auto;
}
.my-page .articlesection .title {
   -ms-grid-row:1;
   margin-bottom:-5px;
   font-size:37px;
   color:#333333;
}
.my-page .articlesection .article .article-image {
   -ms-grid-row:2;
   -ms-grid-column:1;
   margin-right:30px;
}
.my-page .articlesection .article-content {
   -ms-grid-row:2;
   -ms-grid-column:2;
   column-fill: auto;
   column-gap: 30px;
   column-width: 270px;
   height:550px;
   width:auto;
}

运行应用程序并单击集线器上的任何磁贴以查看 split.html。向右滚动，注意背景色文章不正确。

4

0 回答 0