2

私のコードはすべてdefault.htmlにあり、htmlは次のとおりです。

<div id="content">
    <div class="group" id="left">
            <div>Left_1</div>
            <div>Left_2</div>
            <div>Left_3</div>
            <div>Left_4</div>
            <div>Left_5</div>
    </div>
    <div class="group" id="center">
            <div>Center_1</div>
            <div>Center_2</div>
            <div>Center_3</div>
    </div>
    <div class="group" id="right">
            <div>Right_1</div>
            <div>Right_2</div>
    </div>
</div>

そしてcssは：

body {
    font-size:20px;
}

#content {
    display:-ms-grid;
    -ms-grid-rows:1fr;
    -ms-grid-columns:auto auto auto;
    height:100%;
}

.group {
    margin-right:20px;
}

#left {
    -ms-grid-column:1;
}

#center {
    -ms-grid-column:2;
}

#right {
    -ms-grid-column:3;
}

.group div {
    width:300px;
    height:300px;
    background:#888;
    margin:10px;
    text-align:center;
}

結果は次のとおりです。 ここに画像の説明を入力してください

しかし、私が必要なのは： ここに画像の説明を入力してください

cssを変更する方法は？誰が私を助けることができますか？

4

5 に答える 5

3

フレックスボックスを使用する必要があります:

.container 
{
    display: -ms-flex;
    -ms-flex-direction: column;
}

そしてそのコンテナにあなたのアイテムを入れてください。

地下鉄のみのアプリケーションでは、table-cell よりも flexbox を使用することを強くお勧めします。

フレックスボックスのレイアウトには多くの追加オプションがあり、非常に複雑になる可能性があります。ハンズオンについてはこちらを参照してください (必ず IE10 で表示してください) 。詳細なドキュメントについてはこちらをご覧ください。

于 2012-08-29T15:42:28.100 に答える
0

Flexbox はこれを提供しますが、winjs リストビューを使用してすぐに使用できるすべての動作を再配線する必要があります... (ページ ナビゲーション、クリック イベント、データ バインディングなど)

Gridview では、データを水平に表示することはできません。

于 2012-09-02T23:57:57.823 に答える
0

私はフレックスボックスを使用してこれを解決しました:

.group {
    display:-ms-flexbox;
    -ms-flex-align:center;
    -ms-flex-pack:start;
    -ms-flex-direction:column;
    -ms-flex-wrap:wrap;
}
于 2012-08-30T07:28:53.747 に答える
0

GridLayout に設定された Layout で ListView を使用して、必要なレイアウトを実現できるはずです。リスト ビューに関する情報はこちらhttp://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

サンプルについては、Visual Studio 2012 ([ファイル] -> [新しいプロジェクト] を選択した場合) の Javascript セクションにある Grid App テンプレートを確認してください。

于 2012-08-29T15:54:59.000 に答える
-3

http://jsfiddle.net/zuB3k/を参照

display:-ms-gridIE 10 でのみサポートされている を使用している場合は、w3c 標準に準拠し、バージョン 8 以降でサポートされているdisplay:tableおよびを使用できます。display:table-cell

body {
    font-size:20px;
}

#content {
    height:100%;
    display:table;
    width:100%;
}

.group {
    display:table-cell;
    padding-right:20px;
    vertical-align:top;

}

.group div {
    width:100px;
    height:100px;
    background:#888;
    margin:10px;
    text-align:center;
    float:left;
}
于 2012-08-29T15:20:39.513 に答える