考虑这个 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 使用 overflow:hidden 隐藏子 div。但预期用途是动画化/更改父级 div 宽度以“显示”子级的内容。明确地说，我不需要为此目的的动画/更改代码。我只需要一个坚实的 HTML/CSS 基础，这样就可以在运行时进行动画/更改，同时保留这些原始规则:
- 父级必须是屏幕的百分比宽度(目的是为其宽度设置动画以显示/隐藏其子级)。
- child 也必须是屏幕的百分比宽度。
- 子项不得根据其父项包装其内容。
- 在给定宽度的情况下，父级应该只向子级显示尽可能多的内容。
- 没有以像素为单位的绝对宽度。
- 没有 CSS3。
- 没有 JavaScript。
示例:
这是我正在尝试实现的示例:
在此示例中，只有子 div 的父 div 部分应该是可见的。但是 child 的内容不应该换行， parent 和 child 都应该是屏幕的百分比宽度。
我尝试过的:
到目前为止，我已尝试使用此 CSS:
html, body{
height:100%;
}
#parent{
position:relative;
width:15%;
height:100%;
overflow:hidden;
}
#child{
position:absolute;
width:200%;
}
上面的 CSS 的问题是子 div 不断地根据它的父 div 调整它的 width，所以 'revealing'子级 div 通过增加其父级的百分比宽度几乎是不可能的，直到子级内容完全“展开”自身。
你可能会问:
- 为什么不从父级中移除
position:relative以便子级宽度与屏幕保持一致？
因为为了隐藏绝对定位的子元素，父元素需要将其位置设置为relative。
- 为什么不让子元素
static或relative？
因为子项的内容会根据其父项进行包装，从而无法“隐藏”任何内容。
- 为什么 child 是 200%？
这样它就可以有 30% 的相对宽度(相对于屏幕)。因为父项是 15%，子项需要是其父项百分比宽度的两倍才能实现 30% 的屏幕填充。
- 我们可以使用以像素为单位的绝对宽度吗？
没有。
- 我们可以使用 CSS3 吗？
没有。
- 我们可以使用 JavaScript 吗？
没有。如果我们可以使用 JavaScript，我就不会问这个问题，我会在酒吧里。 :-)
最佳答案
试图找到解决方法，我想到了这个可能性:
您将需要一个额外的包装器:
<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%;
}
您实现了“滑动窗口”技术。 parent 并没有真正成长，两个 parent 改变位置以允许或多或少地看到 child 。
fiddle
过渡已经在悬停时实现。 此外，您还摆脱了 child 宽度的人工计算。
关于html - 在响应式/基于百分比的布局中隐藏子元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18943012/