将一个大DIV与两个较小的DIV对齐

Question

我正在尝试做这样的事情：

这是我的代码：

!-- BIG ONE LEFT -->
    <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <a href="#"><img style="height: 420px;" class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>

      <!-- Smalls -->
      <div class="col-lg-4">
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>

这就是结果：

https://codepen.io/anon/pen/WJRGYe

Answer 1

只需使用响应间距工具来填充顶部..

<!-- BIG ONE LEFT -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        </div>
    </div>

    <!-- Smalls -->
    <div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
            <div class="col-lg-12 col-md-6 pt-lg-3 pt-0">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>

https://github.com/angular/angular-cli/issues/5621

Answer 2

你可以尝试这种方法，使用flexbox

HTML

<div class="container">
  <div class="row">
    <div class="flex-container">
      <div class="flex-left">
      </div>
      <div class="flex-right">
        <div class="flex-right-top">
        </div>
        <div class="flex-right-bottom">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.flex-container {
  display: flex;
}

.flex-left {
  flex-basis: 66%;
}

.flex-right {
  flex-basis: 34%;
  display: flex; // for its child elements
  flex-direction: column;
}

.flex-right-top, .flex-right-bottom {
  flex: 1;
}