Question

我有一个宽度为100％的容器（因此视口正好是宽度），在里面我有3个子div，它们也是100％宽度（所以它们填充了填充视口的容器），I当点击相应的链接时，我希望能够将div滑入中心（因此它在视口中而不是在视口中可见）（我实际上使用的是twitter bootstrap 3.0标签，但我覆盖了默认的淡入淡出 - in / fade-out行为有利于创建我自己的滑入/滑出行为。）

我目前正在处理这个位置：绝对在3个div上，然后使用负左定位（例如左：-100％/左：100％）保持2在容器外（向左和向右）很好，唯一的问题是我需要3个div来定位：相对所以他们留在文档流中，因为它们也都是动态高度（在每个页面加载时，然后它们随着连续数据的加载而增长在垂直页面滚动中进入它们，这导致我撞墙。

TLDR：我需要3个位置：100％宽度的相对div都具有相同的顶值并且彼此相邻就好像它们是浮点数一样：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的margin-left设置为0％/ -200％。

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

我将这种方法用于带有画布菜单的移动网站，它对我来说非常好用。我希望这有帮助!!

获取位置：相对宽度：100％divs彼此相邻浮动

1 个答案: