Question

我需要以下布局：

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

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

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

一种方法就是这样（除了图像之外，它在小提琴中效果很好：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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>

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

4 个答案: