0

中に 2 つのボックスが浮いているボックスがあります。ビューポートが大きい場合、ボックスは互いに隣り合っています。ビューポートが小さい場合、ボックスは上下に重なります（私が持っている2つのシナリオを説明するために、幅と高さを修正したjsFiddle：http://jsfiddle.net/5wpH9/）

jQuery を使用してコンテナー ボックスに高さを指定したい (関係ありませんが、ラッパー内のすべての要素は高さを固定する必要があります。垂直方向のスペースを占有せずに要素を自由に浮遊させることはできません)。そして、内部の要素が互いに浮いているかどうかに基づいて、このコンテナ ボックスの高さを計算する必要があります。

内部の小さなボックスの高さは固定されているため、結果は次のようになります。

  • 要素が隣り合っている場合は、コンテナーの高さを 200px にします
  • 要素が重なり合っている場合は、コンテナーの高さを 400px にします

私が考えることができる唯一の方法は、2 番目のボックスの上部からコンテナーの上部までoffset()orposition()計算を行うことです (10px を超える場合は、変更を適用します)。しかし、それを行うためのより良い方法、よりストレートなものがあるかどうか疑問に思っています。

4

2 に答える 2

2

チェック.position()はそれほど悪くありません:

if($("#topElement").position().top - $("#bottomElement").position().top > 10) {
    $("#bottomElement").css("height", "400px");
}

もちろん、ID を変更したい場合もありますが、アイデアはわかります。

于 2012-09-12T23:42:37.363 に答える
0

わかりません。つまり、CSSを使用してコンテナをその内容に合わせて調整することはできませんか？
overflow: hiddenコンテナ上でトリックを行う必要がありheightます。必要ありません。

デモ： http： //jsfiddle.net/elclanrs/5wpH9/3/

于 2012-09-12T23:45:50.917 に答える