CSS 100%并排,水平流动

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

看看我的方法,divs将填充容器所以不需要'微调',加上它是响应,而不是依赖于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;
}

见工作示例