0

レスポンシブ キャプション div を含めるようにライトボックス (マグニフィック ポップアップ) レイアウトを変更しています。目的は、キャプションが写真の横に浮かび、ウィンドウのサイズが変更されると写真の下に折りたたまれるようにすることです。

キャプションの最小幅は約 300px にしたい (正確な幅は重要ではなく、パーセンテージでもかまいません)。ウィンドウの幅が、写真の合計幅 (写真ごとに異なります) + キャプションの幅に対応できない場合、キャプションは写真の下に流れ、写真の全幅にまたがる必要があります (次の図を参照)。 -

ここに画像の説明を入力

問題はこれです：

両方の divで使用しようとしdisplay:inline-blockましたが、キャプション div が写真の下に折りたたまれた後にサイズを変更できません。これはCSSで行うことができますか？メディア クエリでこれが可能であることはわかっていますが、この特定のケースでは、各写真の幅が異なるため、正確なブレークポイントを特定するのは困難です。

ヘルプやアドバイスをいただければ幸いです。ありがとう。

4

1 に答える 1

1

これは、メディアクエリで行うのが最も簡単だと思います。任意の幅を設定し、ウィンドウが広い場合はキャプションを右にフロートさせ、下にある場合は 100% 幅にします。すなわち:

/* Without media query */
.caption {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    ...
}

@media (max-width: 640px) {
    .caption {
        position: static;
        width: 100%;
        ...
    }
}

これをフィドルで説明しました: http://jsfiddle.net/eczYP/。

于 2013-08-03T12:42:58.440 に答える