我正在尝试使用bootstrap来获得两个独立的列(不在同一行中)以具有相同的高度,这将是更大元素(图片)的高度。
我的布局如下所示:http://jsfiddle.net/v30u5zjd/
代码:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 col-sm-height">
<img src="http://www.onlinegamblingbible.com/wp-content/uploads/2014/02/small-Android_logo.png"></img>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="articleRecentTitre">My great title 1</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="articleRecentResume"> Excerpt here gregregfdsxgrezgttretgretregergfdqgregregregvcxgretgertrecdsgf'"t"'</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 col-sm-height">
<img src="http://letrainde13h37.fr/wp-content/uploads/authors/jeremie-patonnier.jpg"></img>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="articleRecentTitre">MY great title 2</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="articleRecentResume">description xaxaxaxaxaxaxaxaxacykaxaxaxafoobarxaxaoifherzoighbnfsoidgneorihgoierhgoihrsfoighvoierhgioreghoireh</h3>
</div>
</div>
</div>
</div>
我基本上希望每个包含图片的列都是最大图片的大小,以便文本可以很好地对齐。
我认为我不能使用不同的行/列布局(将两张图片放在同一行),因为如果调整视图大小/使用它,它会将它们放在正确的位置(连同文本)移动网站。
答案 0 :(得分:0)
这样的事情可以解决问题。将此JavaScript添加到您的页面。
更新了小提琴:http://jsfiddle.net/v30u5zjd/2/
$(document).ready(function () {
var maxHeight = 0;
$("img").each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$("img").height(maxHeight);
});
小心但是 - 将图像缩放到比原始尺寸更大可能会产生一些颗粒状图像。
更新 - 检查新的小提琴。添加了一些代码以允许图像保持响应。您需要为图像添加img-responsive类。