html - 可以成对地为 div 设置相等的高度，但前提是浏览器宽度为 960 或更宽？

Question

我在一个响应式网站上工作，我发现我有一对 div，我希望它们的高度相等，但前提是浏览器宽度等于或大于 960 像素。任何小于该值的 div 都会堆叠，因此不同的高度不会产生影响。

DIV 1 | DIV 2
DIV 3 | DIV 4
DIV 5 | DIV 6
DIV 7 | DIV 8

根据上述设置，Div 1 和 Div 2 需要与 Div 3 和 Div 4 一样高，但两对不需要彼此相等。即成对组可以有不同的高度，但每对必须相等。

这可能吗？如果可能，最好的方法是什么？我的 javascript/jQuery 相当初级。我确定我可以单独完成相同的高度，但对于成对设置我不确定，然后添加需要将其设置为仅在浏览器为 960 或更宽时发生并且我迷路了。

Answer 1

要定位浏览器宽度，请使用 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/

但我认为诀窍是在这些 div 上设置一个类，这样您就可以结合使用 CSS 和 jQuery 来定位它们。如果它是静态代码，那应该很容易。如果它是动态生成的，它将取决于输出。