html - 水平滚动时将 <div> 对齐到最右边的列

Question

我正在尝试制作 <div>与类 col-md-6即使在水平滚动时也始终位于行的右端。 Here是一个例子。

<div class="row">
 <div id="div1" class="col-md-6">.col-md-6</div>
 <div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>

当我们水平滚动时，我想要 div2保留在窗口的最后 6 列中这并没有发生。div 本身正在离开 View 。

您能否指定或提供一些引用来实现此目的？我正在使用 Bootstrap-v3.3.0

Answer 1

您可以将第二个 div 设置为绝对位置，并使用一些 jQuery 使其始终保持在屏幕的边界。

CSS:

[class*="col-"] {
    background: #F2FAFF;
    border: 0px solid #B1D8ED;
    display:inline-block;
}
.test{
    width:2000px;
    background: #F2F79F;
    border: 0px solid #B1D8ED;
}
#fixed{
    position:absolute;
}

HTML:

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
    LARGER DIV
</div>

Javascript:

$(window).scroll(function(){
    $('#fixed').css('right', $(this).scrollLeft() * -1);
});

例子:

http://www.bootply.com/yeKqMVA91r