Question

将overflow-x和overflow-y隐藏在.carousel中，并设置border-box和white-space属性。

将内部div设置为display: inline-block和margin: auto

现在我应该可以使用jquery让.carousel左右滑动，图像将保持一致。

Updated Fiddle

我正在尝试创建一个简单的轮播，从项目1开始，可以滑动到最后一个项目（不需要是无限的项目链）。

我在连续显示项目时遇到了一些问题：

Update

当页面调整大小时，即使我在css中overflow-x: hidden和.carousel设置了html，我的内部div项也会压在一起并显示在彼此之上。

我想要发生的是如果页面调整大小（或者如果旋转木马项目滑动），项目应该并排放置并且只是从屏幕溢出视图。

有人可以告诉我这是否可行，并指出我正确的方向？

非常感谢

Answer 1

你可能想检查我的CSS并自己辨别它。我希望它有所帮助。

https://jsfiddle.net/617zpoy9/2/

<style>
  .carousel {
    height: 100px;
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    background: red;
  }

  .carousel div {
    background:blue;
    width: 15%;
    height: 100%;
    margin: auto;
    display: inline-block;
  }
</style>
<div class="carousel">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

Answer 2

你可以尝试一些javascript代码来定义＆＃34; .carousel＆＃34;的宽度，但你可以试试这个......

html {
    overflow-x: hidden;
}

.carousel {
    overflow-x: hidden;
    position: absolute;
    left:  0px;
    top: 10px;
    width: 10000px;
    background: blue;
}

.carousel div{
    position: relative;
    background: yellow;
    width: 100px;
    height: 250px;
    float: left;
    border: 1px solid black;
}

Answer 3

另一个解决方案是将div的宽度设置为不同于100％：

https://jsfiddle.net/617zpoy9/4/

像这样：

.carousel {
    overflow-x: hidden;
    position: absolute;
    left:  0px;
    top: 100px;
    height: 300px;
    width:9999px;
    background: blue;
}

如何强制Divs并排显示并隐藏任何溢出

3 个答案: