内部柔性容器时图像的高度增加

Question

当我将div.container的样式更改为display: flex时，图像高度会增加。我该如何阻止这种情况发生？

在：

＆＃13;

＆＃13;

$('.text').prev('img').css('height',$('.text').outerHeight());

＆＃13;

div.container {
  border: 1px solid;
}
img {
  float: left;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

后：

＆＃13;

＆＃13;

$('.text').prev('img').css('height',$('.text').outerHeight());

＆＃13;

div.container {
  border: 1px solid;
  display: flex;
}
img {
  float: left;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

默认情况下，display: flex元素的样式为align-items: stretch。您可以将其更改为align-items: flex-start，以避免您的子元素与其最高兄弟的高度相匹配。