javascript - Windows 8 中的 float WinJS.UI.ListView 元素 - HTML 应用程序

Question

我正在学习 Windows 8/HTML/JavaScript 应用程序创建。我正在尝试创建一个 WinJS.UI.ListView object如 MSDN 站点中所述。

现在我有三个 listview 元素，我希望将它们放在一行中。我尝试使用 css float: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);

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

或者我应该采用其他技术吗？

Answer 1

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