两列中的三个div - 高度相等

Question

我需要以下布局：

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

这些框应该是响应式的，并且包含图像（每个框一个）。

我正在使用引导程序 3 并找到了一个可能的解决方案，不幸的是，高度也取决于图像大小。我不能使用表格，布局必须响应迅速，所以固定高度不是解决方案。我搜索了槽堆栈溢出，但找不到解决方案。

一种方法是这样的（在小提琴中运行良好，除了图像：

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>

我在这里创建了一个小提琴：

小提琴

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;
    }

Answer 2

在你的jsfiddle中尝试这段代码

<div class="container">
  <div class="col-xs-6 col-sm-6 col-md-6" >
  <div class="col-md-8">
  <img src="http://placehold.it/400x300" class="img-responsive">
  </div>
  <div class="col-md-5">
  <img src="http://placehold.it/400x300" class="img-responsive">
  </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6" >
  <img src="http://placehold.it/700x600" class="img-responsive">
  </div>
</div>

Answer 3

你可以分配

display:flex;

到行类中的所有子div。

这里的例子 http://codepen.io/tom-maton/pen/Ywdzeo

Answer 4

<div class="row">
<div class="col-sm-6">
  <div class="row">
  <img src="http://placehold.it/400x300" class="img-responsive"/>
  </div>
  <div class="row">
  <img src="http://placehold.it/400x300" class="img-responsive"/>
  </div>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/400x300" style="height:600px" />
</div>
</div>