Css - 集溢出：隐藏在浮动元素的容器

-2

为什么如果根元素.wrapper有overflow: hidden和width:100px，它仍然显示全部三个.item元素？我想只显示一个（其中一个）并隐藏其他，但底层，.item必须在同一行，所以我可以动画滑动。Css - 集溢出：隐藏在浮动元素的容器

SORRY，编辑的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; 
}

来源

2014-02-19 Krab

它正如你所说... [看这里]（http://jsfiddle.net/harsh_shah/v26Gz/）那么你想要什么帮助？ –

@HarshShah：检查jsfiddle链接 – Krab

@Krab ..请检查我提供的小提琴链接 –

你在你的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.

来源

2014-02-19 11:03:36 Eternal1

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

来源

2014-02-19 11:14:21

Css - 集溢出：隐藏在浮动元素的容器

回答

相关问题