如何使容器DIV内的所有兄弟DIV具有相同的高度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使容器DIV内的所有兄弟DIV具有相同的高度？相关的知识，希望对你有一定的参考价值。
所以我在容器中有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的高度放大到图像的高度;我希望图像的高度缩小到文本的高度。
如果有人有任何建议或解决方案，请告诉我。谢谢！
答案
您可以
- 删除浮动以使用表格布局，这将确保两个元素具有相同的高度。
- 使用绝对定位从文档的正常流程中删除图像。这样
.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>另一答案
您可以使用.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>以上是关于如何使容器DIV内的所有兄弟DIV具有相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章