我正在尝试一步一步(总共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% }
不起作用,因为它们会相互堆叠。
答案 0 :(得分:6)
签出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;
}
答案 1 :(得分:4)
快速示例: http://jsfiddle.net/DTTnB/
您可以根据需要微调
我脱掉了overflow-x: hidden
所以你可以看到他们水平躺着
。
你走在正确的轨道上
主要差异:
我将每个容器只占其包装容器的一部分:
.checkout:
width : 20%;
他们的包装容器我把它放宽到足以容纳所有容器,这样每个容器至少占用页面宽度。
checkoutContainer:
width : 1000%;
你可以微调这个