Question

我有这个小提琴：https://jsfiddle.net/DTcHh/18156/我希望右侧的图像与左侧的图像具有相同的高度，这也不是这些图像之间的空间。我也有垂直滚动出现的问题。有什么建议吗？

{{1}}

Answer 1

这是我认为你需要的。

首先使用这个将添加相同高度的元素的JS

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(document).ready(function(){
    equalHeight($(".same-height"));
});

第二个第一个元素必须有这样的封面背景图像的 CSS

.left-image{ background: url('http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg'); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

之后包装所有html

<div class="container"> <div class="backgrounds-images"> <div class="col-md-6 col-sm-6 col-xs-6 same-height left-image"> </div> <div class="col-md-6 col-sm-6 col-xs-6 same-height"> <div class="row"> <div class="col-md-12"> <img class="img-responsive" src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" alt="" /> </div> <div class="col-md-12"> <img class="img-responsive" src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" alt="" /> </div> </div> </div> </div> </div>

这是工作小提琴

https://jsfiddle.net/DTcHh/18164/

最重要的是第一个元素必须有背景图像，只有这样才能使它像你想要的那样

P.S Nadam se da sam pogodio sta ti treba：）

Answer 2

首先，实现这一目标的非常简单和自助的方法是创建两行而不是一行，以控制图像的高度。

drive(Self -> R1 -> R2, curriedArgument: R1) -> R2
// where
Self = Observable<[SearchResultViewModel]>
R1 = CellConfigurator
R2 = Disposable

诀窍是 - 在第二行第一列，留空。所以HTML看起来像

             |
(row1)img1   |   (row1)img2
             |
             |
             |
(row2)blank  |   (row2)img3
             |
             |

其次，图像之间的差距是由于每个<section class="learn_more"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" alt="" /> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpgg" alt="" /> </div> </div>  <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6">  </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpgg" alt="" /> </div> </div> </section>类带来的填充。因此，您可以删除定位.col-xx-类的填充，也可以添加自己的单独类并使用该自定义类。您只需将其添加到CSS

即可

.col-

The updated Fiddle

如何在bootstrap中对图像进行排序？

2 个答案: