0

Windows 8 のリストビューのように、検索されたグリッドにアイテムを表示できるようにしたいと考えています。アイテムは正方形（タイル）になります。

同じ行にある div を作成することで、このように表示することができます。

項目 1 項目 2 項目 3

項目 4 項目 5 項目 6

しかし、私はそれらをこのように表示したいと思います

項目 1 項目 3 項目 5

項目 2 項目 4 項目 6

誰かがこれを達成する方法を知っているのだろうか。

4

2 に答える 2

0

IE10 エンジンは Windows 8 が使用するエンジンと同じですが、Windows 8 アプリで使用される ListView コントロールは、WinJS フレームワークの外では使用できないカスタム コントロールです。エンジンはCSS flexbox 標準を実装しており、詳細はこちら. フレックスボックスのクロス ブラウザー サポートは非​​常に優れています (こちらを参照)。フレックスボックスには、要素を垂直に配置してラップする機能が含まれています。これら 2 つの組み合わせにより、探しているものが実装されます。このようなもの (すべてのベンダー プレフィックスを省略して、-ms バージョンのみを使用します):

<!-- HTML snippet -->
<div class="parent">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
</div>

/* CSS snippet */
.parent {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  height: 300px; /* adjust to create the two rows you're looking for */
}

.parent > div {
  /* you may want to set some flex properties on the children here */
}
于 2013-01-22T15:27:40.283 に答える
0

ここにデモがありますJsBIN

このデモでは、javascriptで各項目のwidthandを設定し、CSS でリストのorを設定します。heightliheightmax-height

于 2013-01-21T21:44:17.470 に答える