1

HTML で任意のコンテンツ (フォーム要素、テキスト、画像) をレンダリングする必要があります。レイアウトに関しては、XAML の「スタック パネル」の概念は、私が探しているものに近いものです。縦にレイアウトしたいコンテンツもあれば、横にレイアウトしたいコンテンツもあります。したがって、HTML を次のようにしたいと考えています。

<div class="stack-vert">
    <div class="stack-vert">
        <div class="content">Vert 1</div>
        <div class="content">Vert 2</div>
    </div>
    <div class="stack-horz">
        <div class="content" style="width: 50px; height: 75px;">Horz 1</div>
        <div class="content" style="width: 50px; height: 50px;">Horz 2</div>
        <div class="content" style="width: 100px; height: 200px;">Horz 3</div>
        <div class="stack-vert">
            <div class="content">Horz 4, Vert 1</div>
            <div class="content">Horz 4, Vert 2</div>
        </div>
    </div>          
    <div class="stack-vert">
        <div class="content">Vert 3</div>
        <div class="content">Vert 4</div>
    </div>
</div>

ハードコーディングされた幅と高さは、さまざまなサイズのコンテンツをシミュレートするためのものです。水平、垂直の 1 つのレベルを正しくレイアウトする CSS があります。

DIV.stack-vert
{
    border: solid thick red;
}

DIV.stack-horz
{
    border: solid thick blue;
}

DIV.content
{
    padding: 5px;
    background-color: grey;
    margin: 5px;

}

DIV.stack-horz DIV.content
{
    display: inline-block;
}

この HTML と CSS は次のようにレンダリングされます。

ここに画像の説明を入力

ご覧のとおり、私が達成したいのは、「Horz 4, Vert 1」と「Horz 4, Vert 2」が「Horz 3」の右側にレンダリングされることですが、垂直方向のスタックになります。ただし、ブロックのスタック垂直表示のため、これは発生していません。

HTML / CSS を使用して任意のコンテンツ セクションのレイアウトのような「スタック パネル」を実現するにはどうすればよいですか?

注：理想的には、「生の」HTML / CSSを使用してこれを解決したいのですが、jQueryなどのフレームワークベースのソリューションを検討します.

編集＃1：@Aequanoxの答えは近いですが、IE 9をサポートしていません。ほとんどのユーザーがそのブラウザを使用しているため（内部アプリです）、IE 9のサポートは不可欠です。

4

1 に答える 1

5

この方法でCSSを変更できます

DIV.stack-vert
{
    border: solid thick red;
    overflow:hidden;
}

DIV.stack-horz
{
    border: solid thick blue;
    overflow:hidden;
}

DIV.content
{
    padding: 5px;
    background-color: grey;
    margin: 5px;

}

DIV.stack-horz > DIV.content
{
    float:left;
}

ここで例を参照してください: http://jsfiddle.net/3e6AY/

于 2013-03-27T15:11:07.357 に答える