2

我正在一个响应式网站上工作，我发现我有一对高度我希望相等的 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 或更宽并且我迷路时才会发生。

4

1 回答 1

5

要定位浏览器宽度，请使用 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/非常快等于高度列在 jquery/

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

于 2012-10-30T05:28:30.850 回答