与其内容相关的所有div的高度对齐
与其内容相关的所有div的高度对齐
提问于 2017-05-23 14:46:34
我在一个main div中有3个div。我需要均匀地对齐所有的div高度。一个div的内容比第一个div多，而另一个div的内容比第一个div少。但我需要两个div高度相同。
.align {
display: inline-block;
background-color : gray;
margin-left : 5px;
border : 1px solid #000;
width : 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class = "col-md-12">
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
</div>
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
<p>hiiii</p>
<p>hello</p>
<p>hiiii</p>
<p>hello</p>
</div>
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
</div>
在这里，高度是不同的。我需要所有的div高度应该相同。添加或删除内容时，应自动调整所有div的高度。请帮帮我。
谢谢你。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-05-23 15:01:54
无论何时添加列，都不要忘记添加一行。要使每一列的高度相等，必须在行中添加display:flex;。代码片段中的代码更改如下所示。
.align {
display: inline-block;
background-color : gray;
margin-left : 5px;
border : 1px solid #000;
width : 100px;
}
.row {
display: flex;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class = "row">
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
</div>
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
<p>hiiii</p>
<p>hello</p>
<p>hiiii</p>
<p>hello</p>
</div>
<div class = "col-md-4 align">
<p>hiiii</p>
<p>hello</p>
</div>
</div>
Stack Overflow用户
发布于 2017-05-23 14:50:06
这是flexbox的工作。
div.col-md-12{align-items: stretch; display: flex;}我只是使用了Link to Flexbox Parameters -md-12来演示哪个div需要flex属性。理想情况下，您添加了一个类，您不希望每一列都有display flex。
Stack Overflow用户
发布于 2017-05-23 15:02:21
有许多方法可以解决这个问题，其中一些方法比其他方法更复杂。我绝对推荐使用CSS-Tricks comprehensive list of solutions来解决这个问题。另外，我不是很确定你想要最后的东西是什么样子，但你可能想从使用内联块切换到块，并向左或向右浮动。不过，您可能不需要这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44127594
复制相关文章
相似问题
腾讯云开发者
