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

在您的 .columnLayoutclass 中添加最小高度属性例如 min-height:200px; 这样所有容器都应具有最小高度，并且如果这些块中的内容是多了他们会适应新的高度。

3列同高

3 columns same height

html

css

height

html

css