Question

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

我现在的问题是，我添加了超过100％身体“容器”的物品，因此浮动物品自然会分解一行。

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

我的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

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

<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>

Answer 2

只需将overflow:hidden和高度添加到#lights即可。那么#lights的css就是：

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

如何使直线浮动元素溢出：隐藏

2 个答案: