كيفية ترتيب listviews في الأعمدة العمودية في MetroApps باستخدام HTML5 ، WinJS؟

لدي تطبيق مترو يحتوي على 2 listviews مع بعض عناصر القائمة. يتم عرض مشاهد القائمة الثانية هذه افتراضيًا أسفل أحدهما الآخر ، في كل مرة أقوم فيها بإضافة قائمة عرض أخرى إلى صفحتي كلها تعرض واحدة أسفل الأخرى. المشكلة هي أنني لا أريد عرض مشاهدات القائمة أفقيًا. أريد أن يتم عرضها جنبًا إلى جنب. لذلك ، يمكن لأي شخص أن يساعدني في كيفية ترتيب listviews جنبا إلى جنب والتي سيكون لها نظرة من تطبيقات مترو.

شكرا لكم.

1
techsaint لا تحتاج إلى اللجوء إلى الاختراق القديم مثل العوامات ، في المترو يمكنك استخدام تخطيط الشبكة .
وأضاف المؤلف robertc, مصدر
هل يمكنك إضافة بعض أمثلة HTML؟ هذا يمكن أن يكون بسيطًا مثل إضافة بعض divs إلى عوامة: تركت في طريقتك.
وأضاف المؤلف techsaint, مصدر

1 إجابة

CSS

.ms-grid
{
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr 1fr;
}

HTML

<div class="ms-grid">
    <div data-win-control="WinJS.UI.ListView"></div>
    <div data-win-control="WinJS.UI.ListView" style="-ms-grid-column: 2;"></div>
</div>
1
وأضاف