您好,我正在尝试复制此设计:
三张图片的大小相同,我使用的是 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>
我删除了所有不必要的源路径和文本以保持可读性
最佳答案
是这样的吗?它不使用 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>
关于javascript - 不同尺寸图像的图库网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32333033/