并排浮动 elements/divs 没有容器宽度

Question

我遇到了一个问题，我有 4 个 div 样式：{width: 100%; float: left;} 在 .container 中，样式为 {width: 1200px; margin: auto;}。现在我希望我的 div 向左浮动并且所有 4 个都在同一行（并排）。

现在，它必须用 float 来完成，因为我想 margin-left 先 div 通过 -100% 然后 -200%，-300%... 首先滑出视口 div 并显示第二个 div，然后滑出第二个 div 以显示第三个 div...我正在构建 jQuery Slider 并且我希望我的 divs 滑出，这就是为什么我需要它们并排并且我需要为 margin-left 设置动画。我知道如何编写 jQuery 代码来实现 work/animate/loop 等。我只受困于 CSS 和浮动，sooo...

拜托，如果你能告诉我如何在 .container（未设置宽度）中使用 float 并排放置我的 4 divs（设置宽度），那将很棒！

Answer 1

您必须像这样嵌套 div：

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

然后相应地调整宽度：

.outer {
    width: 24%;
    float: left;
}
.inner {
    margin-left: -300%;
    width: 400%;
    height: 100px;
    background: #ff0;
}

http://jsfiddle.net/yu6abbhr/

Answer 2

好的。如果您在 100% divs 上使用绝对位置，那么您尝试做的事情（imo）是可行的。因为如果这些容器使用 margin-left，则边距将始终设置内部之间的位置 div 而永远不会像我想的那样与容器一起设置。

一旦 div 被绝对定位，它们就会脱离 html 流，因此您的 margin-left 100%、200% 等将与容器保持一致。

此外，如果不是绝对位置，则绝对不可能（只有 css）将 divs "side-by-side" 定位到容器外，您唯一的机会是在 div 上使用 display:inline-block; 并将 white-space:nowrap; 添加到容器中，但是正如我之前所说，您的 margin-left 永远不会像我认为的那样工作。

所以这就是我要做的：

.container {
    width: 1200px;
    margin: auto;
    font-size: 0px;
    position: relative;
    height: auto;
}
.container div {
    width: 100%;    
    height: 20px;
    position: absolute;
    top: 0;
}

请注意高度已设置，因此您可以在此 FIDDLE

中更好地查看结果

滚动 window 进行检查

并排浮动 elements/divs 没有容器宽度

Float elements/divs side-by-side without container width

css

css-float