Html 鞋带的高度与最高的鞋带相同

我的Bootstrap网站上有一堆

.col-md-2

。在每一个里面，我都有一个图像，每一个都有不同的高度

我想使所有列的高度相同，这样我就可以把图像放在一条“线上”

以下是HTML：

<div class="row">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/300/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
</div>

和一个工作

---

如何实现这一点？

您可以使用

显示：表格单元格

和

表格布局：固定

我在这里找到了一个很好的例子：

HTML

---

我希望这会对你有所帮助。

你能再多描述一下“这样我就可以把图像放在一条“线上”了吗？.col-md-2 img{max width:300px；width:100%；}如果你想增加高度，那么也可以像这样增加高度：200px？

.col-md-2 {
    background-color: red;
}

.col-md-2:nth-child(odd) {
    background-color: green;
}

.col-md-2 img {
    max-width: 100%;
}

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</div>

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}