0

我正在学习 Windows 8/HTML/JavaScript 应用程序创建。我正在尝试按照 MSDN 站点中的描述创建一个WinJS.UI.ListView 对象。

现在我有三个 listview 元素，我希望将它们放在一行上。我尝试使用 cssfloat:left属性将它们显示在一行中。

但问题是我无法将它们放在一行中。这是我的输出截图
在此处输入图像描述

HTML：

 <section aria-label="Main content" role="main">
        <div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
            <div class="iconTextApplications" >
                <img  class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
                <div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
            </div>       
        </div>

<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource, 
    itemTemplate: select('#iconTextApplicationsTemplate'), 
    layout: { type:WinJS.UI.CellSpanningLayout } }" >

CSS

.win-container{
    margin:auto;
}  
.win-surface {
    width:100%;
    margin: 0 auto;
}
.win-viewport {
    width:100%;
    margin: 0 auto;
    background-color:rgb(94, 82, 68);
}

#iconTextApplicationsTemplate {
        float:left;
        width:100%;
        height:100%;
}

JavaScript

var dataArray = [
     { title: "One", picture: "images/jokes.png" },
    {title : "Two" , picture : "images/quotes.png" },
    { title: "Three", picture: "images/trivia.png" }
    ];

var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
    itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);

我是否以错误的方式接近它？

还是我应该采用其他技术？

4

1 回答 1

1

在 WinJS 中，您需要定义高度，因为如果高度设置为自动或 100%，ListView 将自动换行。

于 2013-10-21T17:43:39.217 回答