CSS 100% div 并排，水平流

Question

我正在尝试逐步（总共 4 个步骤）结帐。我想过有一种水平滑块设置。

我创建了一个宽度为 400% 的容器，其中包含 4 个容器。这些容器应并排并填满 100% 的窗口。这是一种水平滑块，但我想将其用作表单。

[[[容器 1][容器 2][容器 3][容器 4]]]

我的html：

    <div class="container fullWidth">

        <div id="checkoutContainer">

            <div class="checkout" id="cart">Cart</div>
            <div class="checkout" id="contact">Contact</div>
            <div class="checkout" id="address">Addresse</div>
            <div class="checkout" id="overview">Übersicht</div>
            <div class="checkout" id="thankyou">Danke</div>

        </div>

    </div>

我的 CSS：

.container.fullWidth {
    width : 100%;
    overflow-x: hidden;
}

div#checkoutContainer {
    background-image: url(../img/background.jpg);
    background-repeat : repeat-x;
    width : 500%;
    height : 657px;
}

div#checkoutContainer div.checkout {
    float : left;
    width : 900px;
    height : 657px;
}

现在的问题是：我能否以某种方式使单个 div 填充页面的宽度而不使用 javascript（我知道我可以检测页面宽度并设置宽度）？设置div.checkout { width : 100% }不起作用，因为它们会相互叠加。

Answer 1

快速示例： http://jsfiddle.net/DTTnB/

您可以根据需要对其进行微调

我删除了overflow-x: hidden，所以你可以看到它们水平放置 . 你是在正确的轨道上

主要区别：

我只制作了每个容器的包装容器的一部分：

.结帐： width : 20%;

我将他们的包装容器做得足够宽以容纳所有容器，这样每个容器至少会占据页面宽度。

checkoutContainer：

width : 1000%; 你可以微调这个

Answer 2

查看my approach，div 将填充容器，因此无需“微调”，而且它是响应式的，并且不依赖于 div 的数量

HTML

<div id="checkoutContainer">
    <div class="checkout" id="cart">Cart</div>
    <div class="checkout" id="contact">Contact</div>
    <div class="checkout" id="address">Addresse</div>
    <div class="checkout" id="overview">Übersicht</div>
    <div class="checkout" id="thankyou">Danke</div>
</div>

CSS

#checkoutContainer {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.checkout {
    display:inline-block;
    width : 100%;
    height : 200px;
    vertical-align: top;
}

See working example