Question

我正在尝试为我的摄影计算器添加类似旋转木马的animation 我是javascript / html / css的新手，所以我一直遇到一些麻烦。：）

我的想法是用数组生成的div填充每个表行，除了三个div之外的所有div都被溢出隐藏：隐藏在外部容器中。如果我的test jsfiddle：

，请点击这里

table {
    width:80%;
    background:#ffff00;
    border: 1px solid black;
    position:relative;
    overflow:hidden;
}
.test {
    width:33.3333%;
    height:100%;
    background:cyan;
    text-align:center;
    vertical-align:center;
    float: left;
    position: relative;
    left:0%;
    top: 0px;
}

问题是如果我尝试添加超过3个div（设置n = 4），它们将换行到下一行，而我希望它们保持在同一行。如果我使用绝对定位，那么我不能使用溢出隐藏（或者我可以吗？）。

我希望有一个简单的解决方案。帮助

Answer 1

填充所有可用的水平空间时，float: left会导致元素换行。你需要做的是安排你的div内联并使你的轮播中的元素不包裹：

http://jsfiddle.net/Wdnw9/19/

CSS

#box { white-space: nowrap; }
.test{
    ...
    display: inline-block;
}

jquery旋转木马，相对定位和溢出

1 个答案:

CSS