如何使容器 DIV 中的所有兄弟 DIV 具有相同的高度？

Question

所以我在一个容器中有 2 个 div。一个向左浮动，一个向右浮动。右边是文字。左边是一张图片。如何设置图像高度，使其等于正确文本的未知高度？

两个 div 的容器也应该与文本 div 的高度相同。图片的高度不应高于或低于文字。

包含文本的 div 应该与其中的文本量一样大。

这是JSFiddle上的一个例子

HTML：

<div class="body">

<div class="imgContainer"><img src="http://www.appleinspires.me/wp-content/uploads/2013/05/mzl.bneaekit.512x512-75.jpg" alt=""></div>

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!</div>

</div>

CSS：

.body {
display: table;
background-color: grey;
margin-bottom: 10.38vw;
margin-left: 5.19vw;
margin-right: 5.19vw;
}
.imgContainer {
    float: left;
    position: relative;
    height: 100%;
    width: 40%;
    background-color: green;
}
img {
    height: 100%;
    width: 100%;
    display: block;
    border-radius:100%;
    margin-left: auto;
    margin-right: auto;
}
.text {
    background-color:blue;
    float: right;
    width: 60%;
    font-size: 2.26vw;
    text-align: left;
    display: table-cell;
}

在 JSFiddle 上，图像的高度似乎高于带有文本的 div 的高度，但这不是我想要的。我希望图像缩小到右侧 div 的高度。由于我的容器显示为表格并且子 div 应显示为表格单元格，因此容器的高度应该与文本的高度相同，这就是我的目标。缩小后，图像也应该在其 div 中水平居中，但我当前的代码应该允许它工作。

另一件事：这样做的重点是因为我正在尝试采用响应式设计。在调整浏览器窗口大小时，图像应与文本保持相同的高度。

为了澄清，我不希望文本 div 的高度放大到图像的高度；我希望图像的高度缩小到文本的高度。

如果有人有任何建议或解决方案，请告诉我。谢谢！

Answer 1

您可以使用 display: flex 将父元素 .body 更改为 flexbox，如下所示：

.body   {
  display: flex;
}

这样做的结果是您的项目将全部排成一排，使用内容的大小作为它们在主轴上的大小。如果某些项目比其他项目高，则所有项目都将沿横轴拉伸以填充其全尺寸。

---

查看此JSFiddle或运行下面的代码片段以获取上述代码的实际示例：

.body {
  display: flex;
  background-color: grey;
  margin: 0 auto;
}

.imgContainer {
  background-color: green;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.text {
  background-color: blue;
  font-size: 14px;
  text-align: left;
}
.text2 {
  background-color: red;
  font-size: 14px;
  text-align: right;
}

<div class="body">

<div class="imgContainer">
  <img src="https://picsum.photos/512/512" alt="">
</div>

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam.!
</div>

<div class="text2">
  Just some short sentence.
</div>

</div>

Answer 2

你可以

• 删除浮动以使用表格布局，这将确保两个元素具有相同的高度。
• 使用绝对定位从文档的正常流程中删除图像。这样.imgContainer 将尽可能短。
• 使图像变大以填满.imgContainer。

.body {
  display: table;
}
.imgContainer,
.text {
  display: table-cell;
  vertical-align: top;
}
.imgContainer {
  position: relative;
  width: 40%;
  background-color: green;
}
img {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 100%;
}
.text {
  background-color: blue;
  width: 60%;
  display: table-cell;
}

<div class="body">
  <div class="imgContainer">
    <img src="http://www.appleinspires.me/wp-content/uploads/2013/05/mzl.bneaekit.512x512-75.jpg" alt="">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!</div>
</div>