Question

我无法均衡两个浮动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>

Answer 1

如果你想平衡你的div的高度，请使用：

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

<强> jsFiddle example

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

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

$(document).ready(function() {
  // Your code here
});

Answer 2

你可以使用纯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;
}

具有自动高度和Jquery的div的高度相同

2 个答案: