1

特定の画面サイズのグリッドにボックスを持つレスポンシブ レイアウトを構築しています。

これは次のようになります。

ここに画像の説明を入力

私がやろうとしているのは、ボックス 3 に上部マージンを追加して、それを押し下げて目的の効果を生み出すことです。

ここに画像の説明を入力

  • ボックス 3 にクラスを適用したくない
  • ボックス 4 コンテナーにあるため、見出しの幅を広げることができません
  • CSSで「前の要素」をターゲットにできればいいのですが、それは不可能のようです
  • ボックスは現在フローティングされておりinline-block、レスポンシブの間隔の問題により使用できません
4

2 に答える 2

1

これは、制限のある純粋な CSS を使用して行うことはできません。ただし、jQuery を使用してそれを行うことができます。

デモ: http://jsfiddle.net/SO_AMK/DKkLh/

jQuery:

$("section").each(function() {
    if ($(this).children("h1").length > 0) {
        $(this).prev().css("margin-top", ($(this).children("h1").height() + 5));
        // +5 for the margin on sections
    }
});​
于 2012-09-14T13:26:51.997 に答える
0

見出しとdivno4を同じdiv/セクションに配置すると、目的の効果が得られます。これがjfiddleです。それはあなたが達成したいことですか？

于 2012-09-14T11:45:00.320 に答える