fiddle

Question

考虑此HTML ：

<body>
  <div id="parent">
    <div id="child">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus eget varius. Curabitur imperdiet sagittis leo, a mollis dui lobortis in. In ac facilisis tortor. Nam vitae pellentesque lorem, non commodo lacus.
    <div>
  </div>
</body>

此处的目的是让父母div将div与overflow:hidden隐藏起来。但预期用途是动画/更改父div宽度以“显示”孩子的内容。为了清楚起见，我不需要为此目的的动画/更改代码。我只需要一个坚实的HTML / CSS基础，这样就可以在运行时动画/更改，同时保留这些原始规则：

父级必须是屏幕的百分比宽度（其目的是为了显示/隐藏其子级而设置其宽度的动画）。
孩子也必须是屏幕的百分比宽度。
孩子不得根据其父母包装其内容。
父母应该尽可能多地透露孩子的宽度。
没有绝对宽度（以像素为单位）。
没有CSS3。
没有JavaScript。

示例：

以下是我想要实现的一个例子：

aims

在此示例中，只有子div的父div部分应该是可见的。但是孩子的内容不应该换行，父母和孩子都应该是屏幕的百分比宽度。

我的尝试：

到目前为止，我已尝试使用此CSS：

html, body{

  height:100%;

}

#parent{

  position:relative;

  width:15%;
  height:100%;

  overflow:hidden;

}

#child{

  position:absolute;

  width:200%;

}

上述CSS的问题在于，div儿童根据其父width不断调整其div，因此通过增加来'揭示'孩子div在孩子的内容完全“解开”之前，父母的百分比宽度几乎是不可能的。

您可以询问：

为什么不从父级删除position:relative以使子宽度与屏幕保持一致？

因为为了隐藏绝对定位的子元素，父级需要将其位置设置为relative。

为什么不制作子元素static或relative？

因为那时孩子的内容会根据其父母的内容进行包装，因此无法“隐藏”任何内容。

为什么孩子为200％？

因此它可以具有30％的相对宽度（到屏幕）。因为父母是15％，所以孩子需要加倍父母百分比宽度才能达到30％的填充率。

我们可以使用像素的绝对宽度吗？

没有

我们可以使用CSS3吗？

没有

我们可以使用JavaScript吗？

没有。如果我们可以使用JavaScript，我就不会问这个问题，我会在酒吧里。： - ）

Answer 1

试图找到一种解决方法，我已经有了这个可能性：

你需要一个额外的包装器：

<div class="parent">
<div class="parent2">
<div class="child">
</div>
</div>
</div>

然后这个CSS

.parent {
    position: relative;
    height: 90%;
    width: 100%;
    left: -70%;
    border-right: 1px solid red;
    overflow: hidden;
}

.parent2 {
    position: absolute;
    width: 100%;
    height: 99%;
    left: 70%;
    border: 1px solid red;
    overflow: hidden;
}

.parent, .parent2 {
    -webkit-transition: all 2s;
}

.child {
    position: absolute;
    width: 50%;
    height: 80%;
    border: 2px solid green;
    background: url("http://placekitten.com/200/300");
    background-size: cover;
}

.parent:hover {
    left: -40%;
}

.parent:hover .parent2 {
    left: 40%;
}

您实现了“滑动窗口”技术。父母并没有真正成长，2个父母改变立场，允许更多或更少的孩子被看到。

fiddle

转换已在悬停时实施。而且，你摆脱了孩子宽度的人工微积分。

在响应/基于百分比的布局中隐藏子元素？

1 个答案:

fiddle