I am learning windows 8/HTML/JavaScript app creation. I am trying to create a WinJS.UI.ListView as described in the MSDN site.
Now I have three listview elements and I want them to be placed on a single row. I tried used css
float:left
property to display them in one line.
But the problem is I can't get them in a single line.
HTML CODE
<section aria-label="Main content" role="main">
<div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
<div class="iconTextApplications" >
<img class="iconTextApplicationsImage" src="#" style="width: 100px; height: 100px;"
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 } }" >
</div>
</section>
.win-container{
margin:auto;
}
.win-surface {
width:100%;
margin: 0 auto;
}
.win-viewport {
width:100%;
margin: 0 auto;
background-color:rgb(94, 82, 68);
display:inline-block;
}
#iconTextApplicationsTemplate {
float:left;
display:table-row;
width:100%;
height:100%;
}
Am I approaching it in the wrong way?
or Should I go for other techniques?