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());

0CSSファイルにある場合は最後の行が出力float: left;され、削除すると実際の高さが出力されます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 に答える