CSS 位置相对和溢出隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5792054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position relative & overflow hidden
提问by Paté
I'm trying to do a simple div switcher with some effect in JQuery but I'm stuck on some CSS issue.
我正在尝试在 JQuery 中做一个简单的 div 切换器，但我遇到了一些 CSS 问题。
Basicly I have a container with a fixed width of 650px & n divs inside this container that all have variable width.
基本上，我有一个固定宽度为 650px 的容器，在这个容器内有 n 个 div，它们的宽度都是可变的。
Since I'm doing a left/right effect I have the container with overflow: hidden so that I can hide the content of the div when as they are positioned on the left of the screen.
由于我正在执行左/右效果，因此我将容器设置为 overflow: hidden 以便我可以在 div 位于屏幕左侧时隐藏它们的内容。
My problem is that as soon as the container is set to overflow:hidden nothing is shown on the screen.
我的问题是，一旦容器设置为 overflow:hidden 屏幕上就不会显示任何内容。
here is my code
这是我的代码
<div class="container">
<div class="somechild">variable height</div>
<div class="somechild">variable height</div>
</div>
And the CSS
和 CSS
.container{
position: relative;
width: 650px;
overflow: hidden;
}
.somechild{
position: absolute;
display: none;
}
thanks
谢谢
回答by Michael
Try this:
尝试这个：
.container{
position: relative;
width: 650px;
height: 30px;
overflow: hidden;
}
Having display none on the child elements means that the parent div doesn't really contain anything, so it's 0 height. Setting the child elements to visible won't change the height automatically, so you need to set it in your CSS upfront or do it programmatically when you set the child to visible.
在子元素上不显示任何内容意味着父 div 并不真正包含任何内容，因此它的高度为 0。将子元素设置为可见不会自动更改高度，因此您需要预先在 CSS 中设置它，或者在将子元素设置为可见时以编程方式进行设置。
回答by adamj
I've noticed that you don't have to specify a fixed width/height to get overflow: hidden;to work properly. All you have to do is use display: block;or display: inline-block;and it will work.
我注意到您不必指定固定的宽度/高度即可overflow: hidden;正常工作。您所要做的就是使用display: block;ordisplay: inline-block;并且它会起作用。
Here is example code for a button with a slide-in animation I did for my own project: http://codepen.io/anon/pen/WbgJgm
这是我为自己的项目制作的带有滑入动画的按钮的示例代码：http: //codepen.io/anon/pen/WbgJgm
HTML:
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;
}
}
}
}
