Question

我试图将图像的高度设置为相邻div的高度。

问题是，即使在使用JavaScript获取div的高度并使用它来设置图像的高度之后，最后一个<p>元素也会出现在图像下面。

＆＃13;

$("#here").find('img').css("height", $(".text").outerHeight());

＆＃13;

img {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED">
  <div class="text">
    <h2>Movie: RED</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p>
    <p>Movie Categories Action, Comedy, Crime</p>
    <p>111 min long</p>
    <p>Some actors were Bruce Willis, Mary-Louise Parker, Heidi von Palleske, Karl Urban</p>
    <p>Rated: PG-13</p>
  </div>
  <br>
  <input type="submit" value="Add">
</div>

＆＃13;

您可以点击提交按钮，在http://thecodesee.pe.hu/重现该问题。

这是我想要的结果：

以下是目前的情况：

Answer 1

试试这个解决方案。

$.ajax({
         type: "POST",
         url: "search.php",
         success: function(data) {
            $("#here").css("display", "block");
            $("#here").html(data).promise().done(function() {
               $("#here").find('img').css("height", $(".text").outerHeight());
               var $img = $("#here").find('img');

                $img.on('load', function() {
                    $("#here").find('img').css("height", $(".text").outerHeight());
                });
            });

     }
  });

Answer 2

仅在页面加载时或仅在调用函数时才调整图像大小。我相信你必须写一个window.onresize（）事件来不断根据布局改变图像大小。

$(document).ready(function(){
            window.onresize = function(){
            $("#here").find('img').css("height", $(".text").outerHeight());     
            }

        });

然而，这并不适合第一次加载。在检索大小之后，似乎会渲染div。您可能希望确保在获取outerHeight（）之前已经渲染div，方法是使用.ready（）来获取该心室

Answer 3

你可以用css简单的css代码修复它;通过调整宽度尺寸，如：

 img {
  float: left;
  width: 25%;
}
.text {

  width : 75%;
}

图像不能正确调整到div的高度

3 个答案: