html - 多个与屏幕宽度相同的水平div

Question

我喜欢这样(有点)html:

<window>
    <container>
        <item 1>...</item>
        <item 2>...</item>
        <item 3>...</item>
        ...
        <item n>...</item>
    </container>
</window>

其中 n 是元素的可变数量。

我本质上是在(某种)css 中寻找类似这样的东西:

window { width: 100%; }
container { width: n * 100%; }
item { width: 100% of window; }

或者换句话说:窗口应该缩放到屏幕宽度的 100%。容器应水平并排放置所有元素，并且每个元素应为窗口宽度的 100%。

或者在 ASCII 中:

+-screen--------------+
|                     |
|                     |
|+-window------------+|
||                   ||
||+-container---------------------------------------------------+
|||                                                             |
|||+-item 1---------+ +-item 2---------+  ... +-item n---------+|
|||| = 100% of win  | |                |      |                ||
|||+----------------+ +----------------+      +----------------+|
|||                                                             |
||+-------------------------------------------------------------+
|+-------------------+|
+---------------------+

这可能只使用 css 吗？

如果不是，使用 jQuery 的首选方式是什么？

坦克很多。

(这当然是为了构建一些水平 slider )

Answer 1

虽然您无法使用 CSS 计算和固定容器的宽度，但您可以将其保留为 auto 并且不包裹内容。这样它的宽度就会增加它拥有的子 div 的数量。

片段:

* { box-sizing: border-box; }
html, body {
    width: 100%; margin: 0;
    overflow: hidden;
}
div.container {
    height: 120px;
    border 1px solid gray;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

div.r {
    height: 120px; width: 100%;
    background-color: #ccc;
    display: inline-block;
}

<div class="container">
    <div class="r"></div>
    <div class="r"></div>
    <div class="r"></div>
</div>