如何使容器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中水平居中，但是我当前的代码应允许它正常工作。

另一件事：关键是因为我正在尝试进行响应式设计。调整浏览器窗口大小时，图像应保持与文本相同的高度。

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

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

Answer 1

您可以使用以下方法将父元素.body更改为flexboxdisplay: flex：

.body   {
  display: flex;
}

这样的结果是，您所有的项目都将连续排列，使用内容的大小作为主轴上的大小。如果某些物品比其他物品高，则所有物品都将沿横轴拉伸以填充其全部大小。

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

.body   {
  display: flex;
}

.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;
}

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>