0

我目前有一条“直线”线漂浮着不同位置的物品：左 - 从占据所有空间的左外侧到身体的右外侧。

我现在的问题是，我添加的物品超出了 100% 身体“容器”的容量，因此浮动物品自然会分解成一条线。

我想要实现的是，我只希望我的项目继续进入一些溢出：隐藏状态（而不是分解） - 这样我基本上可以继续添加项目而不会破坏线路。

我的 HTML 基本上如下 -这个问题也可以在这里看到：

#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;
}
4

2 回答 2

0

一个技巧是将它包装到一个具有不同（更宽）宽度的 div 中，并让 line 元素隐藏溢出，您可以根据需要调整它，这是一个非常简单的示例 ofc，因为我很懒，所以我没有在所有浏览器上试用。

<html>
<head>
    <style>
        #main_wrapper
        {
            width: 960px;
            height: 200px;
            overflow: hidden;
            margin: auto;
        }

        #main_wrapper .overflow_line
        {
            width: 300%;
            height: 200px;
            clear: both;
            border: 1px solid #d3d3d3;
        }

        #main_wrapper .overflow_line > div
        {
            float: left;
            width: 100px;
            height: 120px;
        }

    </style>

</head>
<body>
    <div id="main_wrapper">
        <div class="overflow_line">
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
        </div>
    </div>
</body>

于 2013-04-22T16:39:09.993 回答
0

只需添加overflow:hidden 一个高度即可#lights。所以你的CSS#lights将是：

#lights {
position: absolute;
z-index: 999;
overflow: hidden;
height: 78px; //set this to whatever you need
}
于 2013-04-22T16:42:28.167 回答