Question

我有一个网页，其中包含一些应该水平布局的<section>个。所有都是屏幕宽度的85％，两边都有自动边距。问题是由于某些原因，这些部分似乎忽略了float:left。我也不想在主体上设置固定宽度，因为在许多页面上将使用相同的CSS。有没有办法可以做到这一点？

Here's a jsbin of the code。我也用display:box尝试了这个。

Answer 1

您可以做的是使用JS来“调整”容器的大小。这是一个简短的例子：

<div id="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

您所做的是float:left所有部分（另外为容器添加overflow:hidden;zoom:1以进行包装）。满容易。但是，它们受到容器宽度的限制（或者如果它直接与身体的子体相关，则它们受到html body的约束）。

从这里开始，你使用JS来做这个伎俩。我更喜欢jQuery（但人们可能批评不使用纯JS，所以我只会描述这个过程）。你要做的是获得部分的“外部宽度”（即宽度，包括填充，边框和边距），乘以你有多少部分，然后将其应用于直接父/容器（或任何父级）这限制了您的水平项目。）

效果是您的部分的父级将具有明确的宽度，这将强制浏览器使其适合，因此可以水平滚动。另外，也要使容器适合各个部分。

这些方法目前由JS“滑块”完成，它具有外部容器的指定宽度（如900px），但有一个内部容器，有3个部分（2700px）。这个，在外部容器中添加overflow:scroll使其中的所有内容都“水平滚动”

如何制作具有未知数量的部分的水平滚动页面？

1 个答案: