Html 3列相同高度

我试图为三列设置相同的高度。我一直在互联网上四处寻找，我尝试了几种选择，但其中任何一种似乎都能奏效

代码如下：

html 我一直试图把它放在JSFIDLE上，但它们显示在块中，彼此之间没有列

有人能帮我一下吗？我不知道我做错了什么

---

干杯

在容器div上尝试

display:table

，在列上尝试

display:table cell

。

在

中。columnLayout

类添加一个最小高度属性，例如

min height:200px以便所有容器都应有一个最小高度，如果这些块中的内容超过了新高度，则它们将适应新高度。
基础良好，但并非全部。首先自己试试，你会发现这还不够，然后在这里发布解决方案。谢谢！！！它起作用了。虽然内容短或长并不理想，但这个最小高度将形成一个空白……因此，理想情况下，它应该以最大高度作为其他列的参考，但这是自我开始以来的最佳解决方案。。。。谢谢
  <div class="container">
          <div id="firstBlockGroup" class="col-md-24">
          <div class="columnLayout col-md-8 col-sm-8 col-xs-24">
            <img class="imageOfColumn" src="images/leftImg.png" alt=""/>
            <div class="descriptionPic">
                  <span class="titleLabelPic">BORDEAUX 2014</span>
                  <span class="descLabelPic">Read our honest review of this interesting most recent vintage</span>
                  <span class="moreLabelPic">If it's a lemon, we call it a lemon >>></span>
            </div>
          </div>
          <div class="columnLayout col-md-8 col-sm-8 col-xs-24">
            <img class="imageOfColumn" src="images/middleImg.png" alt=""/>
            <div class="descriptionPic">
                  <span class="descLabelPic">Decorum Vintners' Producer of the Month</span>
                   <span class="descLabelPic">June 2015</span>
                  <span class="moreLabelPic">Domaine ETIENNE SAUZET >>></span>
            </div>
          </div>
          <div class="columnLayout col-md-8 col-sm-8 col-xs-24">
            <img class="imageOfColumn" src="images/rightImg.png" alt=""/>
            <div class="descriptionPic">
                  <span class="descLabelPic">Discover incredible wines from Queen Victoria's favourite region in Germany</span>
                  <span class="moreLabelPic">Mosel Superstars >>></span>
            </div>
          </div>
         </div> 
        </div>

 .columnLayout {
   padding: 0px;
   margin-right: 20px;
   width: 32.4%; 
   height:100%;
}
.columnLayout img{
    width:100%;
}

.columnsContainer{
    padding-bottom:50px;
}
#firstBlockGroup{
    margin-bottom:50px;
    overflow:hidden;
    padding:0;
    display:inline;
}
div.columnLayout:last-child{
     margin-right: 0 !important;
}
.descriptionPic{
    background-color:#fff;
    padding:10px;

}
.descriptionPic span{
    display:block;
}
.titleLabelPic{
  text-transform: capitalize;
}
.descLabelPic{
   color:#78777d;
}
.moreLabelPic{
    color:#58575f;
    font-weight:400;
}
.imageOfColumn{
width:100%;
height:220px;
}