1

考虑这个 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。

示例：

这是我要实现的目标的示例：

目标

在这个例子中，只有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.

  • 为什么不制作子元素staticor relative？

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

  • 为什么孩子是200%？

这样它就可以有 30% 的相对宽度（到屏幕）。因为父级是 15%，所以子级需要两倍于父级的百分比宽度才能实现 30% 的屏幕填充。

  • 我们可以使用以像素为单位的绝对宽度吗？

不。

  • 我们可以使用 CSS3 吗？

不。

  • 我们可以使用 JavaScript 吗？

不。如果我们可以使用 JavaScript，我就不会问这个问题了，我会在酒吧里。:-)

4

1 回答 1

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%;
}

您实现了“滑动窗口”技术。父母并没有真正成长，两个父母改变位置以允许或多或少地看到孩子。

小提琴

过渡已经在悬停时实现。此外，您摆脱了孩子宽度的人工计算。

于 2013-10-18T21:21:28.557 回答