CSS 100％并排，水平流 [英] CSS 100% divs side by side, Horizontal flow

问题描述

我想一步一步（共4步）结帐。我想到有一个水平滑块设置。

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.

我创建了一个宽度为400％的容器，包含4个容器。这些容器应该并排并且填充100％的窗口。这是一个水平滑块，但我想用它作为一个形式。

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

[[[Container 1][Container 2][Container 3][Container 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％} 不工作，因为它们会堆叠在一起。

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.

推荐答案

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

您可以调整这种方式。

我起飞了 overflow-x：hidden ，所以你可以看到他们水平放置
。
你在正确的轨道上

I took off overflow-x: hidden so you can see that they lie horizontally . you were on the right track

主要区别：

其包装容器的比例：

.checkout：
width：20％;

.checkout: width : 20%;

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

Their wrapping container I made it wide enough to accommodate all containers so that each container would take up at least the page width.

checkoutContainer：

checkoutContainer:

width：1000％;
您可以微调这

width : 1000%; you can fine tune this

这篇关于CSS 100％并排，水平流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！