0

我无法平衡两个浮动 div 的高度。我想要完成的是在两个并排的 div 中显示相同的高度，因为内容的长度会发生变化。现在我的浏览器似乎只是忽略了 Jquery 代码。

这是我所拥有的：

<style>
#column_first {
    width: 300px
    float: left;
    margin: 15px;
    padding: 25px;
    background-color:#fff;
}
#column_second {
    width:300px;
    float: left;
    margin: 15px;
    padding: 25px;
    background-color:#fff;
    height: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var maxHeight = 0;

$("#column_first").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("#column_second").height(maxHeight);
</script>
</head>
<body>
<div id="column_first"><p>Some Text</p></div>
<div id="column_second"><p>Some Text</p></div>
4

2 回答 2

3

如果要均衡 div 的高度，请使用以下命令：

var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

jsFiddle 示例

您通过其 ID 定位特定的 div，因此更改不会应用于所有 div。就我个人而言，我会给他们一个共同的课程并以它为目标。

注意，还要确保将您的 jQuery 包装在一个文档就绪调用中：

$(document).ready(function() {
  // Your code here
});
于 2013-05-01T20:29:02.250 回答
0

您可以使用纯 CSS 获得等高的列：

http://cssdeck.com/labs/dxtwufys

body { /* styles for the container element */
    display: table;
    border-spacing: 15px;
}

#column_first, #column_second {
    display: table-cell;
}

#column_first {
    width: 300px;
    /*margin: 15px; ignored*/
    padding: 25px;
    background-color:#fff;
}
#column_second {
    width:300px;
    /*margin: 15px; ignored*/
    padding: 25px;
    background-color:#fff;
}
于 2013-05-01T20:50:05.867 回答