使用CSS响应垂直对齐三个相同的框

Question

我正在使用Bootstrap，并希望有三个相同高度的盒子垂直对齐。

在这里你可以看到这三个区块，但是我需要它们具有相同的高度以占据最大空间。我可以手动添加一些填充，使其看起来像这样：

然而，当块变小（引导程序的网格）时，它会中断。

有什么想法吗？ 这是我正在使用的CSS代码和HTML布局。

.caption {
    height: 150px;
    overflow: hidden;
	position: relative;
	padding: 0!important;
}
.caption-info{
	width: 70%;
    height: 100%;
    display: inline-block;
	padding: 9px;
}
.caption-flag:hover{
	background: rgba(235, 75, 75, 1);
	transition: background 0.2s ease;
}
.caption-flag{
	cursor: help!important;
	transition: background 0.2s ease;
	position: absolute;
    background: rgba(235, 75, 75, 0.75);
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
    top: 20px;
    z-index: 9999;
    font-size: 20px;
}
.caption-info h4 { margin-top: 5px; margin-bottom:5px;}
.caption-prices{
	width: 32%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    text-align: center;
}
.caption-prices h4{
	margin-top: 0;
	margin-bottom: 0;
	font-weight: bold;
}
.caption-square, .caption-cost, .caption-total{
	box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
	padding-left: 0!important;
	color: white;
	font-size: 0.85em;
	padding: 5.5px;
}
.caption-square{
	background: green;
}
.caption-cost{
	background: orange;
}
.caption-total{
	background: red;
}
.thumbnail {
    padding: 0;
	position: relative;
}

<div class="row">
  <div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
      <img src="http://placehold.it/320x150" alt="">
      <div class="caption">
        <div class="caption-info">
          <h4><a href="#">Product Title</a></h4>
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="caption-prices">
          <div class="caption-square">
            площадь
            <h4>$24.99</h4>
          </div>

          <div class="caption-cost">
            цена за м<sup>2</sup>
            <h4>$24.99</h4>
          </div>

          <div class="caption-total">
            стоимость
            <h4>$24.99</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

更改此规则

.caption-square, .caption-cost, .caption-total{
    box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
    padding-left: 0!important;
    color: white;
    font-size: 0.85em;
    padding: 5.5px;
    height: 33%;                   /* added */
    box-sizing: border-box;        /* added */
}

示例代码段

.caption {
    height: 150px;
    overflow: hidden;
	position: relative;
	padding: 0!important;
}
.caption-info{
	width: 70%;
    height: 100%;
    display: inline-block;
	padding: 9px;
}
.caption-flag:hover{
	background: rgba(235, 75, 75, 1);
	transition: background 0.2s ease;
}
.caption-flag{
	cursor: help!important;
	transition: background 0.2s ease;
	position: absolute;
    background: rgba(235, 75, 75, 0.75);
    color: white;
    font-weight: bold;
    width: 100%;
    text-align: center;
    top: 20px;
    z-index: 9999;
    font-size: 20px;
}
.caption-info h4 { margin-top: 5px; margin-bottom:5px;}
.caption-prices{
	width: 32%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    text-align: center;
}
.caption-prices h4{
	margin-top: 0;
	margin-bottom: 0;
	font-weight: bold;
}
.caption-square, .caption-cost, .caption-total{
	box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
	padding-left: 0!important;
	color: white;
	font-size: 0.85em;
	padding: 5.5px;
    height: 33%;
    box-sizing: border-box;
}
.caption-square{
	background: green;
}
.caption-cost{
	background: orange;
}
.caption-total{
	background: red;
}
.thumbnail {
    padding: 0;
	position: relative;
}

<div class="row">
  <div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
      <img src="http://placehold.it/320x150" alt="">
      <div class="caption">
        <div class="caption-info">
          <h4><a href="#">Product Title</a></h4>
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="caption-prices">
          <div class="caption-square">
            площадь
            <h4>$24.99</h4>
          </div>

          <div class="caption-cost">
            цена за м<sup>2</sup>
            <h4>$24.99</h4>
          </div>

          <div class="caption-total">
            стоимость
            <h4>$24.99</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>