Question

我有一系列浮动div，我想在水平线上旋转到无穷大（继续浮动）。这些div需要在有限宽度div内继续。最后，我想按左右两侧的div /按钮滚动项目（使用滚动条）。

我无法让div保持在他们的浮动范围内。一旦他们在父div中耗尽了空间，他们就会开始包装。

有没有办法绕过包装？一旦我搞清楚了，下一步是使用jQuery让水平在点击时左/右移动，以便复制水平滚动。

这是我做过的小提琴和代码：

HTML：

<div id='container'>
    <div id='arrowL'>
    </div>
    <div id='arrowR'>
    </div>
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>

    </div>

CSS：

#container{
width:340px;
    height:50px;
}

.list{
    background:grey;
width:300px;
    height:50px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

任何和所有帮助表示赞赏。谢谢！

Answer 1

试试这个，将list类包装在一个带有overflow：hidden的容器中。然后，您可以使用JQuery通过内部div执行任何操作。

Sample Fiddle

#list-container {
overflow:hidden;    
width: 300px;   
}

.list{
background:grey;
min-width:700px;
float:left;
}

浮动Div - 停止清除/包装

1 个答案: