不同尺寸图像的图库网格

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引导程序或网格系统，而仅使用几个简单的浮动对象。

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

Answer 2

您必须将min-height分配给右图块以匹配左图块的高度。 例如。 html代码。

<div class='col-md-8 block-left'>
</div>
<div class='col-md-4'>
   <div class='row'>
      <div class='col-md-12 block-right-top'></div>
      <div class='col-md-12 block-right-bottom'></div>
   </div>
</div>

的CSS

.block-left{
        height:210px;
    }
    .block-right-top{
        min-height:100px;
        margin-bottom:10px;
    }
    .block-right-bottom{
        min-height:100px;
    }

Answer 3

第一：尝试将其放入2种不同的

 <div class="row"> <div class="col-md-8 Height1"> <!--- Left Box----> <img src="..."/> </div> <div class="col-md-4"> <!--- Right Box----> <div class="col-md-12 Height2"> <img src="..."/> </div> <div class="col-md-12 Height2"> <img src="..."/> </div> </div> </div> 

指定col-md-8的高度-（Height1类）Height2类必须将Height1除以2。

必须使用float。 * NB：不添加任何自定义CSS。 因此，请不要在“运行代码”中检查输出