3列相同的高度

Question

我正在尝试为三列设置相同的高度。我一直在寻找互联网，我尝试了几种选择，但其中任何一种似乎都在起作用。

以下是代码：

HTML

  <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>

CSS

 .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;
}         

我一直试图把它放在JSfiddle上，但是它们显示在块中，没有列相邻......

有人可以帮我一把吗？我不知道我做错了什么......

干杯!!!

Answer 1

在容器div上尝试display: table，在列上尝试display: table-cell。

Answer 2

在你的.columnLayout类中添加一个最小高度属性，例如min-height:200px;，以便所有容器都应该具有最小高度，如果这些块中的内容超过它们将适应新的高度。