Question

问题

我已经搜索了一段时间，无法弄清楚我应该如何实现水平滚动条。

这是我的滚动区域

_____________
|           |
|___________|

使用两张卡滚动区域

_____________
|__|        |
|__|________|

滚动区域有四张牌等

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

有什么方法可以在卡上使用position:relative;来实现这一点吗？我认为容器应该有width:auto;但是如何让下一张卡落在下面，而不是右边？

ANSWER

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

Answer 2

想出来，需要flex-flow: column wrap display: flex和align-content: left

＆＃13;

#deck {
    flex-flow:column wrap;
    display:flex;
    align-content:left;
  
    height:204px;
    width:250px;
    overflow:auto;
    background-color:grey;
}

.card {
    background-color:white;
    margin:1px;
    width:100px;
    height:100px;
}

＆＃13;

<div id="deck">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
</div>

＆＃13;

保证金似乎没有影响到右侧，但布局看起来不错

http://jsfiddle.net/kcxnany7/1/

CSS水平滚动条，如何定位＆＃34;下面＆＃34;之前＆＃34;对＆＃34;？

问题

ANSWER

2 个答案: