2 个超大 div 在 100% div 中彼此相邻答案

【问题标题】：2 oversized divs next to each other in 100% div2 个超大 div 在 100% div 中彼此相邻
【发布时间】：2014-06-18 21:10:54
【问题描述】：

尽管我们认为解决方案很简单...！

我们有一个宽度为 100% 且溢出：隐藏的响应式容器 div。此容器有一个居中的边距 0 自动 div 'A'，固定宽度为 950 像素。

我们想在此容器旁边放置一个最大宽度容器“B”，右：-3000px 将其放置在屏幕外。

然后，我们将使用 jQuery 为第一个容器设置 opacity:0 动画，并为第二个容器设置动画 right:0px ，使其从屏幕右侧很好地进入。

但是，容器 B 不会在容器 A 旁边排列。它被放置在第一个容器的右下角。

我们需要做什么才能让容器 B 与容器 A 对齐？

提前感谢您的帮助！代码如下：

HTML：

<div id="container">
    <div id="A">Some content</div>
    <div id="B">Some content</div>
</div>

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

【问题讨论】：

试试position: absolute;。相对于它通常显示的位置，即第一个 div 的下方。绝对是相对于最近定位的父级。
你为什么不尝试而不是将它从屏幕右侧移出-3000px，只需使用绝对位置并将其定位：-Xpx 其中X是所述div的宽度？它会在屏幕外，但只是完全等待 jQuery 通过将此值设置为零来滑入。
一个字母 ID 或类名是糟糕的做法！
how's this?请注意，在您看到正确的内容之前，您的屏幕必须至少有 1170 像素宽（由于 a 的宽度为 950 像素，b 的内边距为 220 像素）
试试这个：jsfiddle.net/5L43T/1

标签： html css css-float

【解决方案1】：

您的问题是您只是在为第一个元素的不透明度设置动画，当它达到零时，尽管您看不到它 - 它仍然以其原始尺寸存在于文档布局中。因为 B 在 DOM 中位于它下方，所以当它滑入时，它将位于（尽管）不可见的 A 占用的空间下方。

您可能希望在动画完成后在 A 上设置display:none，或者将其高度设置为零。这将确保它在淡出的同时不会占用您预期的空间，这意味着 B 可以占据预期的位置。

您可能希望在 A 上使用 fadeOut(); 而不是为其不透明度设置动画，这也会自动应用 display:none;

纯 CSS '悬停'解决方案：

Demo Fiddle

HTML

<div class='wrapper'>
    <div></div>
    <div></div>
</div>

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

【讨论】：

【解决方案2】：

将#B div 的位置更改为position:absolute;

【讨论】：

【解决方案3】：

Demo here

<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>

【讨论】：