html - 在 100% div 中彼此相邻的 2 个超大 div

Question

尽管我们认为解决方案非常简单......但我们已经完全碰壁了......!

我们有一个宽度为 100% 且 overflow:hidden 的响应式容器 div。这个容器有一个居中的 margin 0 auto div 'A'，固定宽度为 950px。

我们想在这个容器旁边放置一个最大宽度的容器“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;
}

Answer 1

改变#B div的位置到position:absolute;