[英]Gallery grid of different size images
Hello I am trying to replicate this design: 您好,我正在尝试复制此设计:
The size of the three images is the same and I am using Twitter Bootstrap, but cannot get them to align this way. 这三个图像的大小是相同的,并且我正在使用Twitter Bootstrap,但是无法以这种方式对齐它们。 The idea is to have the bigger image as 6 columns and then the other two would be 6, but on top of each other, aligning to the same height as the bigger one.
想法是将较大的图像显示为6列,然后将其他两列显示为6列,但彼此重叠,对齐到与较大列相同的高度。 Any ideas how I can tackle this or any libraries I can use?
有什么想法可以解决这个问题或可以使用的任何库吗?
EDIT: add current code 编辑:添加当前代码
<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>
I have removed all the unnecessary source paths and text to keep it readable 我删除了所有不必要的源路径和文本,以保持可读性
Something like this? 像这样吗 It doesn't use twitter bootstrap or a grid system, its just a couple of simple floats.
它不使用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>
You have to assign min-height
to right blocks to match the height of left block. 您必须将
min-height
分配给右图块以匹配左图块的高度。 eg. 例如。 html code.
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 的CSS
.block-left{
height:210px;
}
.block-right-top{
min-height:100px;
margin-bottom:10px;
}
.block-right-bottom{
min-height:100px;
}
First: Try to put it in 2 different 第一:尝试将其放入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>
Specify the height for col-md-8 - (Height1 class) Height1 has to be divided by 2 for Height2 class. 指定col-md-8的高度-(Height1类)Height2类必须将Height1除以2。
Use float is necessary. 必须使用float。 *NB: Not adding any custom CSS.
* NB:不添加任何自定义CSS。 So, plz do not check the output in "Run Code"
因此,请不要在“运行代码”中检查输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.