如何使容器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应该显示为table-cells，容器的高度应该与文本的高度相同，这正是我的目标。一旦图像收缩，图像也应该在其div中水平居中，但我当前的代码应该允许它工作。

另一件事：重点是因为我正在努力寻求响应式设计。在调整浏览器窗口大小时，图像应保持与文本相同的高度。

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

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

Answer 1

您可以

• 删除浮动以使用表格布局，这将确保两个元素具有相同的高度。
• 使用绝对定位从文档的正常流程中删除图像。这样.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>

Answer 2

您可以使用.body将父元素display: flex更改为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>