兩列中的三個div-高度相等

Question

我需要以下布局：

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

這些框應具有響應性並包含圖像（每個框一個）。

我正在使用引導程序3，並找到了可能的解決方案，不幸的是高度也取決於圖像大小。 我不能使用表格，而且布局必須具有響應性，因此固定高度是無法解決的。 我搜索了低谷stackoverflow，但找不到解決方案。

一種方法是這樣（除了圖像之外，在小提琴中效果很好）：

 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> 

我在這里創建了一個小提琴：

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

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>