获取位置：相对宽度：100% div 以彼此相邻浮动

Question

我有一个 100% 宽度的容器（因此视口恰好是任何宽度），在其中我有 3 个子 div，它们也是 100% 宽度（因此它们填充了填充视口的容器），我当单击相应的链接时，希望能够将 div 滑入中心（因此它在视口中可见，而不是在外部可见）（我实际上为此使用了 twitter bootstrap 3.0 选项卡，但我覆盖了默认的淡入淡出-有利于创建我自己的滑入/滑出行为的淡入/淡出行为）。

我目前在 3 个 div 上使用 position:absolute 进行管理，然后使用负左定位（例如 left:-100%/left:100%）将 2 个保持在容器外（左右）很好，唯一的问题是我需要 3 个 div 是 position:relative 以便它们留在文档流中，因为它们也是动态高度（在每个页面加载时，然后它们随着连续数据的加载而增长在垂直页面滚动时进入它们）这导致我撞到了墙上。

TLDR：我需要 3 个位置：相对 div，它们的宽度为 100%，它们都具有相同的顶部值并且彼此相邻，就好像它们是 float:left 一样（尽管 2 总是在它们的容器 div 之外，这也是100% 宽度）

可能没有合适的解决方案，但我认为值得一试。

Answer 1

几天前我遇到了类似的问题。我的做法如下：

标记：

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

CSS：

.outer {
    width: 300%;
    margin-left: -100%;
}
.inner {
    width: 33.33333%;
    float: left;
}

使用此代码，中间的内部 div 在视口中可见。所有三个内部 div 都彼此相邻浮动。因此，如果您想将第一个或第三个内部 div 放入视口，您只需使用 Javascript 将外部 div 的左边距设置为 0% / -200%。

如果你想要一个幻灯片效果，你必须为左边距的 .outer 类添加一个 CSS 过渡。

我将这种方法用于带有非画布菜单的移动网站，它对我来说效果很好。我希望这会有所帮助！