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

Question

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

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

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

上的示例

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。由于我的容器显示为 table 而子 div 应该显示为 table-cells，因此容器的高度应该与文本的高度相同，这就是我的目标是。图片在缩小后也应该在其 div 中水平居中，但我当前的代码应该允许这样做。

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

澄清一下，我不希望文本的高度 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

您可以使用 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>

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

How to make all sibling DIVs inside a container DIV have equal height?

html

css

responsive-design