javascript - 不同尺寸图像的图库网格

Question

您好，我正在尝试复制此设计:

三张图片的大小相同，我使用的是 Twitter Bootstrap，但无法让它们以这种方式对齐。这个想法是将较大的图像设置为 6 列，然后其他两个将是 6，但彼此重叠，与较大的图像对齐到相同的高度。有什么想法可以解决这个问题或我可以使用的任何库吗？

编辑:添加当前代码

<div class="home-banner-option-three">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6 nopadding banner-left">
            <img class="img-responsive" src="" alt="Banner image" />
            <div class="banner-text">
              <h4 class="banner-title">text</h4>
              <p class="banner-paragraph">text</p>
              <a href="" class="btn banner-btn">text</a>
            </div>
          </div>
          <div class="col-sm-6 noppading banner-right">
            <div class="row">
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-one">
                  <p>text</p>
                </div>
              </div>
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-two">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 nopadding">
                <div class="banner-sm">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

我删除了所有不必要的源路径和文本以保持可读性

Answer 1

是这样的吗？它不使用 twitter bootstrap 或网格系统，它只是几个简单的 float 。

.large {
    float: left;
    margin-right: 10px;
}
.small {
    float: left;
}
.small img {
    height: 95px;
    display: block;
}
.small img:first-child {
    margin-bottom: 10px;
}

<div class="gallery">
    <img src="http://placehold.it/300x200" class="large" />
    <div class="small">
        <img src="http://placehold.it/300x200" />
        <img src="http://placehold.it/300x200" />
    </div>
</div>