Question

我正在尝试在JQuery中做一个简单的div切换器，但是我遇到了一些CSS问题。

基本上我有一个固定宽度为650px＆amp;的容器。 n在这个容器内的div，它们都有可变的宽度。

由于我正在做左/右效果，我有容器溢出：隐藏，以便我可以隐藏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中预先设置它，或者在将子项设置为可见时以编程方式执行。

Answer 2

我注意到您没有必要指定固定的宽度/高度才能使overflow: hidden;正常工作。您所要做的就是使用display: block;或display: inline-block;，它会起作用。

以下是我为自己的项目制作的滑入动画按钮的示例代码：http://codepen.io/anon/pen/WbgJgm

<强> HTML：

<a href="#"><span>Hello</span></a>

<强> LESS：

a {
  text-decoration: none;
  color: blue;

  span {
    display: inline-block;
    overflow: hidden;
    position: relative;
      z-index: 1;
      padding: 10px 15px;
    border: 1px solid blue;

    &:after {
      content: "";
      position: absolute;
        top: 0; left: -100%;
        z-index: -1;
      width: 100%; height: 100%;
      background: blue;
      -webkit-transition: left 0.1s ease;
      -moz-transition: left 0.1s ease;
      transition: left 0.1s ease;
    }
  }
  &:hover {
    span {
      &:after {
        left: 0;
      }
    }
  }
}

位置相对＆amp;溢出隐藏

2 个答案: