0

Windows 8/HTML/JavaScript アプリ作成を学んでいます。MSDN サイトで説明されているように、 WinJS.UI.ListView オブジェクトを作成しようとしています。

現在、3 つのリストビュー要素があり、それらを 1 行に配置したいと考えています。cssfloat:leftプロパティを使用して、それらを 1 行に表示しようとしました。

しかし、問題は、それらを一行で取得できないことです。これは私の出力のスクリーンショットです
ここに画像の説明を入力

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 では、高さが auto または 100% に設定されている場合、ListView が自動的に折り返されるため、高さを定義する必要があります。

于 2013-10-21T17:43:39.217 に答える