Question

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

现在，必须使用float完成，因为我希望margin-left首先按-100%然后-200%，-300%...滑出viewport第一个div并显示第二个div，然后滑出第二个div以显示第三个div ...我正在构建jQuery Slider，我希望我的div滑出，这就是为什么我需要它们并排，我需要动画利润率左。我知道如何编写jQuery代码来使其工作/动画/循环等。我只是坚持使用CSS和浮动，sooo ...

如果你能告诉我如何在.container（宽度未设置）中使用float并排放置我的4个div（设置宽度），那就太棒了！

Answer 1

确定。如果你在你的100％div上使用绝对位置，那么你想要做的就是（imo）只是可行的。因为如果这些容器使用margin-left，则边距将始终设置inners div之间的位置，而不是我认为你想要的容器。

一旦div被绝对定位，它们就不在html流程中了，所以你的保证金 - 100％，200％等等将与容器一致。

另外，如果不是绝对位置，那么将divs“并排”放置在容器之外绝对是不可能的（只有css），你唯一的机会就是在div上使用display:inline-block;然后将white-space:nowrap;添加到容器中，但正如我之前所说的那样，您的保证金将永远不会像我想象的那样有效。

所以这就是我要做的事情：

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

注意高度已设置，以便您可以在 FIDDLE

中更好地查看结果

滚动窗口进行检查

Answer 2

你必须像这样嵌套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/

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

2 个答案: