Question

为什么如果根元素.wrapper包含overflow: hidden和width:100px，它仍会显示所有三个.item元素？我想只展示一个（第一个）并隐藏其他的，但是潜在的，.item必须在同一行，所以我可以动画滑动。

抱歉，编辑JSFIDDLE LINK：http://jsfiddle.net/QpdY9/

HTML

<div class="wrapper">
        <div class="itemWrapper">
            <div class="item a"></div>
            <div class="item b"></div>
            <div class="item c"> </div>
        </div>
    </div>

CSS

.wrapper {
    width:100px;
    height:100px;
    overflow:hidden;
}

.item {
    width:100px;
    height:100px;
    float: left;
}

.itemWrapper{
    width:300px;
    height:100px;
    overflow:hidden;
}

.a {
    background-color: red;
}

.b {
    background-color: blue;
}

.c {
    background-color: yellow;
}

Answer 1

你的jsfiddle中有一个拼写错误

html, body, div {box-sizing: border-box; padding:0; margin:0; border:0;}; <-- that ; invalidates your next .wrapper class. If you remove it everything is fine.

Answer 2

在您的小提琴链接上，删除最后一个“;”在第一行。它会正常工作。

Css - 设置溢出：隐藏在浮动元素的容器上

2 个答案: