javascript - CSS 水平滚动，如何将 "below"定位在 "right"之前？

Question

问题

我已经搜索了一段时间，但不知道应该如何实现水平滚动条。

这是我的滚动区域

_____________
|           |
|___________|

滚动区域有两张卡片

_____________
|__|        |
|__|________|

滚动区域有四张卡片等

_____________
|__|__|     |
|__|__|_____|

有什么方法可以在卡片上使用 position:relative; 来实现吗？我想容器应该有 width:auto; 但我怎样才能让下一张卡片落在下面，而不是右边？

回答

CSS horizontal scroller, how to position "below" before "right"?

Answer 1

我知道它有点乱，但我认为你可以做这样的事情......

html:

<div class="container">
    <div class="wrap">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</div>
<button id="ad">add div</button>

CSS:

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png);
}
div.wrap{
    position: relative;
    width:100%;
    height:100%;
    max-width:100%;
    max-height: 100%;
    overflow-y:hidden;
    overflow-x: scroll;
}
div.top{
    position: absolute;
    height: 50%;
    max-height:50%;
    top: 0; left:0;
    background-color: rgba(0,0,0,0.5);
}
div.top > div{
    position:relative;
    width:40px;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
}
div.bottom{
    position: absolute;
    height: 50%;
    max-height:50%;
    bottom: 0; left:0;
    background-color: rgba(0,0,0,0.5);
}
div.bottom > div{
    position:relative;
    width:40px;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
}
button {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999999999999;
}

js:

var cCount = true;

$('#ad').click(function () {
    if (cCount) {
        $('.top').append('<div></div>');
        $('.top').animate({width: $('.top').find('div').length * 40 + 'px'}, 1);
        cCount = !cCount;
    } else {
        $('.bottom').append('<div></div>');
        $('.bottom').animate({width: $('.bottom').find('div').length * 40 + 'px'}, 1);
        cCount = !cCount;
    }
});

你也可以看看Here