レスポンシブサイトで作業しています。ブラウザの幅が960px以上の場合に限り、同じ高さのdivのペアがあることがわかりました。それよりも小さい場合はdivがスタックするため、高さが異なっても違いはありません。
DIV 1 | DIV 2
DIV 3 | DIV 4
DIV 5 | DIV 6
DIV 7 | DIV 8
上記の設定に基づいて、Div1とDiv2は、Div3とDiv4と同じ高さである必要がありますが、両方のペアが互いに等しい必要はありません。つまり、ペアセットの高さは異なる場合がありますが、各ペアは等しくなければなりません。
これは可能ですか？もしそうなら、取るべき最善のアプローチは何ですか？私のjavascript/jQueryはかなり初歩的です。一人で同じ高さを実現できると確信していますが、ペアセットではわからないので、ブラウザが960以上で迷子になった場合にのみ、これを設定する必要があります。
ブラウザの幅をターゲットにするには、CSS3メディアクエリを使用します。これを行うにはいくつかの方法があります...
既存のCSSファイル：
@media only screen and (min-device-width: 960px) {
/* css rules for those divs go here */
}
または、新しいスタイルシートを設定して、次のように呼び出します。
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 960px)" href="big-screen.css" />
等しい高さのdivを取得することに関しては、ここにいくつかのメソッドがあります： http ://css-tricks.com/fluid-width-equal-height-columns/ ここにjQueryメソッドもあります：http：//www.broken-links。 com / 2009/01/20 / very-quick-equal-height-columns-in-jquery /
しかし、トリックは、CSSとjQueryの組み合わせでそれらをターゲットにできるように、それらのdivにすでにクラスが設定されていることだと思います。静的コードの場合、それは十分に簡単なはずです。動的に生成される場合は、出力に依存します。