1

I am trying to do some step by step (4 steps in total) checkout. I thought about having a kind of a horizontal slider setup.

I created a container with a width of 400% containing 4 containers. These containers should be side by side and fill 100% of the Window. This is kind of a horizontal slider but i want to use it as a form.

[[[Container 1][Container 2][Container 3][Container 4]]]

My 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>

My 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;
}

The question is now: Can i somehow make the single divs fill the width of the page without using javascript (I know i can detect the page width and set the width)? Setting div.checkout { width : 100% }does not work as they will stack on each other then.

4

2 回答 2

6

查看我的方法，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;
}

查看工作示例

于 2013-07-06T21:16:11.893 回答
4

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

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

我起飞了，overflow-x: hidden所以你可以看到它们是水平躺着的。你在正确的轨道上

主要区别：

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

。查看： width : 20%;

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

结帐容器：

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

于 2013-07-06T20:39:18.307 回答