相对位置和溢出隐藏

Question

我正在尝试做一个简单的div切换器,在JQuery中有一些效果,但我仍然坚持一些CSS问题.

基本上我有一个容器,固定宽度为650px&n divs在这个容器内,所有容器都有可变的宽度.

因为我正在做左/右效果我有容器溢出:隐藏,以便我可以隐藏div的内容,因为它们位于屏幕的左侧.

我的问题是,只要容器设置为溢出:隐藏屏幕上不显示任何内容.

这是我的代码

<div class="container">
    <div class="somechild">variable height</div>
    <div class="somechild">variable height</div>
</div>

和CSS

.container{
  position: relative;
  width: 650px;
  overflow: hidden;
}

.somechild{
  position: absolute;
  display: none;
}

谢谢

Answer 1

试试这个:

.container{
   position: relative;
   width: 650px;
   height: 30px;
   overflow: hidden;
} 

在子元素上显示none表示父div实际上不包含任何内容,因此它的高度为0.将子元素设置为可见不会自动更改高度,因此您需要在CSS中预先设置它,或者在将子项设置为可见时以编程方式执行此操作.