Html 具有堆叠图像的引导列：需要具有相同的列高度

我有一个带堆叠图像的引导部分，问题是我希望第二列和第三列始终与第一列具有相同的高度。我似乎找不到第二列和第三列的解决方案，因为随着我改变视图大小，它们的高度不断波动。最好让它们始终与底部和顶部对齐

.gallery{
最小高度：980px；
}
.画廊{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}

---

您好，保罗，您可以通过这种方式解决问题，我发现您使用的是boostrap，您不需要css中的属性flex

<div class="row">
<div class="col-sm-5">
   <a href="#"><img src="https://www.jssor.com/demos/img/paint/01.jpg"></a>
</div>

<div class="col-sm-4">
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/02.jpg"></a>
    <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a>
</div>

<div class="col-sm-3">
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive"></a>

别忘了在html中添加bootrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

我解释了为什么你不需要flex，Boostrap让你的thml对class.row有响应，你可以用12列来填充它，这就是为什么你的例子中有col-sm-（Number）5+4+3=12，如果你愿意的话，你可以在这个链接中阅读更多内容

如果高度是一个问题，您可能应该在css中使用

背景图像

，而不是

元素。

---

希望这能解决问题。

您是否尝试添加了一个{display:flex；}？因此您希望它们始终与第一列保持相同的高度，即使第一列比其他列小或大？xpy:正确。虽然在这种情况下，第一列总是会更大/更高。谢谢你的回复，帕特里克。我已经试过了，当我缩小到更小的视口时，列的高度就不一样了。由于列宽不同，图像宽度也不完全适合它们，这可能会非常困难。如果将图像的宽度除以12，并使高度精确对应，则可能会起作用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

.column-sm-4{
   display: flex;
   flex-direction: row;
}