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

Question

我正在一个响应式网站上工作，我发现我有几对高度相等的 div，但前提是浏览器宽度等于或大于 960px。任何小于此值的值和 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 的组合来定位它们。如果它是静态代码，那应该很容易。如果它是动态生成的，它将取决于输出。