8

我注意到一个奇怪的jquery.height()函数行为。看看下面的代码。

CSS：

div.text-field {
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

HTML：

<div id="someid">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>

JS：

console.log($("someid").find("text-holder").height());

0如果我float: left;在 CSS 文件中，最后一行输出，如果我删除，则输出实际高度float: left;。这种行为的原因是什么？我可以将height()函数与 一起使用float: left;吗？

4

6 回答 6

6

当float元素在容器内时，该元素不会应用容器的高度，因为该元素不再处于“流”中。它从当前元素中删除，并应用于它的父元素，因此出现了问题。您可以通过使用来修复它inline-block，或clear: both

于 2012-12-12T16:06:51.290 回答
3

我通常使用一个高度为 0 的元素，并将两者都作为容器中的最后一个子元素。这会导致容器围绕浮动对象“拉伸”：

<div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>

这是QuirksMode 文章的变体，具有良好的跨浏览器兼容性。

我已经重写了您的代码以包含它并演示结果：

<html>

<head>
<title>test</title>
<style type="text/css">
div.text-field
{
    border: 1px solid red;
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

div.text-holder
{
    border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#output1").text($("#someid1 .text-holder").height());
    $("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>

<body>

<div id="someid1">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>
<br>
<div id="output1">&nbsp;</div>

<br><br><br>

<div id="someid2">
  <div class="text-holder">
    <div class="text-field">text here</div>
    <div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>
  </div>
</div>
<br>
<div id="output2">&nbsp;</div>

</body>

</html>

该演示也可以在JSFiddle上查看。

于 2012-12-12T16:24:23.217 回答
2

因为floats从正常流程中删除元素。尝试使用overflow:hidden

看演示

更多详情http://www.quirksmode.org/css/clearing.html

于 2012-12-12T16:06:02.153 回答
2

floats从空间中删除元素，因此它占用 0 空间。height()它占用的空间也是0

于 2012-12-12T16:08:01.767 回答
2

在 jQuery 中，测试脚本如下所示：

console.log($("#someid").find(".text-holder").height());

如果您修改 html 以清除浮动，则父级将获得高度：

    <div id="someid">
        <div class="text-holder">
            <div class="text-field">text here</div>
            <div style="clear: both;"></div>
        </div>
    </div>
于 2012-12-12T16:12:55.330 回答
0

我在使用float更好的元素定位时遇到了同样的问题。但是，如果您（像我一样）事先知道元素的确切内容是什么，您可以在 CSS 类中添加一个height带有值的属性（例如height: 30px），这样 jQuery.height()方法就可以工作了。

于 2016-09-22T21:47:00.383 回答