0

こんばんは。私はこの問題に関して何時間も試みてきました。以下に示すように、大きな列の位置を達成したかったのですが、何か他のものを取得しています。

   medium               large                 What I get

[    A    ]  |  [    A    ][         ]  |  [    A    ][         ]
 ---------   |   --------- [    B    ]  |             [    B    ]
[    B    ]  |  [         ][         ]  |             [         ]
 ---------   |  [    C    ] ---------   |   ---------  ---------
[    C    ]  |  [         ][    D    ]  |  [         ][    D    ]
 ---------   |  [         ]             |  [    C    ]
[    D    ]  |                          |  [         ]
             |                          |  [         ]

ご覧のとおり、大画面では A と C の間に大きなギャップがあります。私は、ハックをできるだけ使わずに、C が上がってその空白を取りたかったのです。

これが私が試したコードです。

<div class="row profile align-top">
    <div id="A" class="column small-12 large-8">
        .....
    </div>

    <div id="B" class="column small-12 large-4">
        ....
    </div>

    <div id="C" class="column small-12 large-8">
        ....
    </div>

    <div id="D" class="column small-12 large-4">
        .....
    </div>
</div>

みんなありがとう！

編集：

jfiddle の例を追加: https://jsfiddle.net/k18zw694/2/

4

3 に答える 3

0

可視性クラスを使用する必要があります。解決策を用意しましたが、に置き換えlargeましたmedium。JSfiddle ではビューポートを大きく設定できないため、これが必要でした。

既存の の横にあるこの html を使用する必要がありますrow。

<div class="row show-for-medium">
    <div class="medium-8 columns">
        <div class="row">
            <div id="A" class="column">
                <h1>
                  A
                </h1>
            </div>
        </div>
        <div id="C" class="column">
            <h1>
              C<br>C<br>C<br>C<br>
            </h1>
        </div>
    </div>
    <div class="medium-4 columns">
        <div id="B" class="column">
            <h1>
              B<br>B<br>B
            </h1>
        </div>
        <div id="D" class="column">
            <h1>
              D
            </h1>
        </div>
    </div>
</div>

明確にするために、この例と JSfiddle のソリューションを確認してください: https://jsfiddle.net/linkers/fea3evce/2/

于 2016-02-15T10:56:52.657 に答える