0

Foundation 4 を使用して請求書ページをグリッド化しています。これが私のコードです：

<div class="row grid">
    <div class="large-6 columns">
        <span>Ship To</span>
    </div>
    <div class="large-6 columns">
        <span>Order Information</span>
    </div>
</div>
<div class="row">
    <div class="large-6 columns">
        <span>Content Of ShipTo</span>
    </div>
    <div class="large-6 columns">
        <span>Content Of Order Information</span>
    </div>
</div>

2 つの行を持つ 2 列のテーブルとして表示されます。

ただし、ウィンドウを狭めると、2 つのヘッダーが一緒に上下することがわかります。2 列目の最初のセルを 1 列目の最初のセルの下に表示したいと考えています。コードを変更するには？ネスト グリッドが機能する可能性もありますが、それでも皆様からのご意見をお待ちしております。

img1

現在、このような狭い効果が表示されていますが、これは望んでいません。 img2

4

1 に答える 1

0

マークアップを、関連するコンテンツを含むグループ ヘッダーに変更する必要があります。あなたが持っているものの代わりに、次のようなものを試してください：

<div class="large-6 small-12 columns">
    <div>
        <span>Ship To</span>
    </div>
    <div>
        <span>Order Information</span>
    </div>
</div>
<div class="large-6 small-12 columns">
    <div>
        <span>Content Of ShipTo</span>
    </div>
    <div>
        <span>Content Of Order Information</span>
    </div>
</div>

これにより、小さなビューポートでは積み重ねられ、大きなビューポートでは横に並べられます。

于 2013-06-25T18:33:53.857 に答える