Bootstrap 3 - 2列具有相同的列高度，2个图像在同一列中，一个图像对齐到顶部，一个图像对齐到底部

Question

目标对齐：
| img1 | img2 |
| img1 | |
| img1 | |
| img1 | img3 |

CSS

.row-eq-height {  /* For same column height */
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}

HTML

<div class="container">
  <div class="row row-eq-height " >
    <div class="col-md-4" style="background-color:red">
      <img src="http://placehold.it/350x500" class="img-responsive"/> <!-- img1-->
    </div>
    <div class="col-md-4" style="background-color:green">
      <img src="http://placehold.it/150x150" style="vertical-align: top"/>  <!-- img2-->
      <img src="http://placehold.it/150x150" style="vertical-align: bottom"/>  <!-- img3-->
    </div>
  </div>
</div>

Answer 1

因为您使用的是flexbox

.parent {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.item {
  /*height: 50px;*/
  margin: 5px;
  background: DeepSkyBlue;
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
}
.parent2 {
  display: flex;
}


.example-basis .parent {
  display: flex;
  flex-direction: column;
}

.example-basis .item {
  width: 200px;
}

<div class="example example-basis">
  <h2>flex</h2>
  <div class="example-content">
    <div class="parent2">
      <div>
        <div class="item">img1</div>
        <div class="item">img1</div>
        <div class="item">img1</div>
        <div class="item">img1</div>
      </div>
      <div class="parent">
        <div class="item">img2</div>
        <div class="item">img3</div>

      </div>
    </div>
  </div>
</div>