[英]2 oversized divs next to each other in 100% div
We've hit a complete wall with this one, even though we think the solution is quite easy ...! 尽管我们认为该解决方案非常简单,但我们已经用它完成了一遍墙!
We have a responsive container div with width 100% and overflow:hidden. 我们有一个响应容器div,其宽度为100%,并且溢出:隐藏。 This container has a centered margin 0 auto div 'A' with fixed width 950px. 此容器的居中边距0自动div'A'具有固定宽度950px。
We want to place a max-width container 'B' next to this container with right:-3000px to place it off screen. 我们要在此容器旁边放置一个最大宽度为“ B”的容器,其右边为:-3000px,以将其放置在屏幕之外。
We will then use jQuery to animate opacity:0 the first container and animate right:0px the second container, bringing it in nicely from the right of the screen. 然后,我们将使用jQuery为第一个容器的不透明度0设置动画,并为第二个容器的right设置像素动画:0px,从屏幕右侧开始将其很好地引入。
However, container B will not line-up next to the container A. It get's placed to the bottom right of the first container. 但是,容器B不会在容器A旁边排成一行。它被放置在第一个容器的右下角。
What do we need to do to get container B to line up next to container A? 我们需要做什么才能使容器B在容器A旁边对齐?
Thanks in advance for any help! 在此先感谢您的帮助! Here's the code: 这是代码:
HTML: HTML:
<div id="container">
<div id="A">Some content</div>
<div id="B">Some content</div>
</div>
CSS: CSS:
#container {
float: left;
overflow: hidden;
width: 100%;
}
#A {
margin: 0 auto;
max-width: 950px;
position: relative;
}
#B {
max-width: 715px;
padding-left: 220px;
position: relative;
right: -3000px;
z-index: 999;
}
将#B
div的位置更改为position:absolute;
<div id="container">
<div id="A">A Some content</div>
<div id="B">B Some content</div>
</div>
<script type="text/javascript">
$( "#B" ).animate({
right: 0,
opacity: 1
}, 1500, "linear", function() {
alert( "all done" );
});
</script>
<style type="text/css">
#container {
overflow: hidden;
width: 100%;
height:50px;
position:relative;
background-color:orange;
}
#container > div {
position:absolute;
}
#A {
top:0;left:0;
margin: 0 auto;
max-width: 950px;
}
#B {
max-width: 715px;
padding-left: 220px;
right: -3000px;
z-index: 999;
background-color:green;
opacity:0.5;
}
</style>
Your issue is that you are simply animating the opacity of your first element, when this hits zero, although you cant see it- it is still present within the document layout with its original dimensions. 您的问题是,当第一个元素的不透明度达到零时,您只是在对其进行动画处理,尽管您看不到它-它仍以其原始尺寸存在于文档布局中。 Because B is below it in the DOM, when it slides in, it will be below the space taken by the (albeit) invisible A. 由于B在DOM中位于其下方,因此当它滑入时,它将位于(尽管)不可见A占用的空间之下。
You may want to set display:none
on A after the animation completes, or alternatively set its height to zero. 您可能希望在动画完成后在A上设置display:none
,或者将其高度设置为零。 This will ensure that as well as fading out, it isnt taking up space as you are anticipating, meaning B can assume the anticipated position. 这样既可以确保褪色,也不会像您预期的那样占用空间,这意味着B可以占据预期位置。
You may want to use fadeOut();
您可能要使用fadeOut();
on A instead of animating its opacity, this will automatically also apply display:none;
在A上代替设置其不透明度动画,这也将自动应用display:none;
HTML HTML
<div class='wrapper'>
<div></div>
<div></div>
</div>
CSS CSS
.wrapper {
position:relative;
}
.wrapper div:first-of-type {
height:200px;
width:100%;
background:blue;
position:relative;
opacity:1;
transition-delay:0;
transition-duration:1s;
transition-property:opacity;
}
.wrapper div:last-of-type {
height:200px;
position:absolute;
top:0;
left:0;
width:100%;
background:red;
width:100%;
max-width:0;
transition-delay:1s;
transition-duration:1s;
transition-property:max-width;
}
.wrapper:hover div:first-child {
opacity:0;
}
.wrapper:hover div:first-child + div {
max-width:100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.