html - 如何让 float 元素的直线溢出: hidden

Question

我目前有一条“直线”线，由不同位置的元素 float :左 - 从占据所有空间的左外侧到 body 的右外侧。

我现在的问题是，我添加的元素超过了 100% 主体“容器”所能容纳的数量，因此 float 元素自然会分列。

不过，我想要实现的是，我只想让我的元素继续进入某种溢出:隐藏状态(而不是分解)——这样我基本上可以继续添加元素而不会破坏生产线。

我的 HTML 基本上是以下内容 - the issue can also be seen here :

#lights {
    position: absolute;
    z-index: 999;
overflow: hidden;
}

.lightItem {
    float: left;
}

// ** I basically repeat this pattern in the straight line  // *
.lightItem.c1Light_1 {
    padding: 38px 0 0 42px;
}

.lightItem.c1Light_2 {
    padding: 37px 0 0 82px;
}

.lightItem.c1Light_3 {
    padding: 46px 0 0 59px;
}

Answer 1

只需添加 overflow:hidden 和 #lights 的高度。所以你的 #lights 的 CSS 应该是:

#lights {
position: absolute;
z-index: 999;
overflow: hidden;
height: 78px; //set this to whatever you need
}