javascript - 两列中的三个 div - 等高

Question

我需要以下布局:

+-----------+-----------+
|           |           |
|   Div A   |           |
|           |           |
|           |           |
+-----------+   Div C   |
|           |           |
|    Div B  |           |
|           |           |
|           |           |
+-----------+-----------+

这些框应该具有响应性并包含图像(每个框一个)。

我正在使用 bootstrap 3 并找到了一个可能的解决方案，不幸的是高度还取决于图像大小。我无法使用表格，并且布局必须具有响应性，因此固定高度不是解决方案。我搜索了 stackoverflow 但找不到解决方案。

一种方法是这样的(除了图像之外，它在 fiddle 中运行良好:

var colHeight = $(".slider").height();
var colHeight2 = colHeight - 30;
$('.child').css('min-height', colHeight2 / 2);

.slider {
  background: #555;
}
.image1 {
  margin-bottom: 30px;
  background: #555;
}
.image2 {
  background: #555;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-8 slider">
      <img src="http://placehold.it/700x600" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12 image1 child">
          <img src="http://placehold.it/400x300" class="img-responsive">
        </div>
        <div class="col-xs-6 col-sm-12 image2 child" style="overflow: hidden;">
          <img src="http://placehold.it/400x300" class="img-responsive">
        </div>
      </div>
    </div>
  </div>
</div>

我在这里创建了一个 fiddle :

JsFiddle

Answer 1

你可以检查display:flex。我会执行以下操作:

<div class="outer-container">
    <div class="inner-container item">
        <div>
            <img src="" style="height:300px"/>
        </div>
        <div>
            <img src="" style="height:200px"/>
        </div>
    </div>
    <div class="item">
        <img src="" />
    </div>
</div>
.outer-container {
        width: 50%;
        margin: 0 auto;
    }
    .outer-container, .inner-container {
        display: flex;
    }
    .inner-container {
        flex-direction: column;
    }
    div {
        border: 1px solid;
    }