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的首选方式时才会这样做？

坦克很多。

（这当然是建立一些水平滑块）

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>

Answer 2

您可以将项目显示为inline-block元素，然后让容器不包装元素。然后列表项将在线跟随。

隐藏容器的溢出，以免body变宽：

＆＃13;

body{
    margin:0;
}

ul{
    width:100%;
    padding:0;
    margin:0;
    white-space: nowrap;
    overflow-x: auto;
}

ul li{
    width:100%;
    display: inline-block;
}

＆＃13;

<ul>
    <li>List Item 1</li><!--
 --><li>List Item 2</li><!--
 --><li>List Item 3</li>
</ul>

＆＃13;

多个水平div，宽度与屏幕相同

2 个答案: