Html 用于在元素中显示不同数量的div列的水平滚动

我有几根柱子漂浮在一个容器中。容器宽度是响应性的（100%），并且将根据用户窗口大小采用不同的宽度。当列无法装入容器时，我希望它自动进入水平滚动。我本以为我的造型能做到这一点，但它不起作用。在这个示例中，我显示了9列，但根据不同的场景，可能会有不同的数字，从3到15。还有一个预装在那里太。 子元素不能是内嵌块，也不能隐藏溢出

#容器{
溢出-x：滚动；
位置：相对位置；
空白：nowrap；
宽度：100%；
}
.栏目{
浮动：左；
宽度：300px；
}
#预紧器{
显示：无；
身高：100%；
宽度：100%
}
.clr{
明确：两者皆有；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
元素
div
是块元素，因此需要将其转换为
内联
或
内联块
元素

A始终从一条新线开始，并占据可用的全部宽度（尽可能向左和向右延伸）


只需将
显示：内联块
添加到
列

您的代码必须如下所示：
#容器{
溢出-x：滚动；
空白：nowrap；
宽度：100%；
}
.第{
显示：内联块；
宽度：300px；
}
#预紧器{
显示：无；
身高：100%；
宽度：100%
}
.clr{
明确：两者皆有；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
2.
3.
4.
5.
6.
7.
8.
9
问题在于，一旦元素到达其父元素的末尾，float就会自动包装元素。另一方面，您的
div#列
将增长到
div#容器
的最大宽度（因此总屏幕宽度）

要解决此问题，必须为
div#列指定宽度。下面是一个小示例，介绍如何通过计算它包含的
div.column
的总宽度来动态执行此操作


var总和=0；
$（“.column”）.each（函数（）{sum+=$（this.width（）}）；
$（“#列”）.css（'width'，sum）
#容器{
溢出-x：滚动；
位置：相对位置；
空白：nowrap；
宽度：100%；
}
.栏目{
浮动：左；
宽度：300px；
}
#预紧器{
显示：无；
身高：100%；
宽度：100%
}
.clr{
明确：两者皆有；
}


1.
2.
3.
4.
5.
6.
7.
8.
9
你说的是
列
，我看到两列带有css的列，意思是它应该是什么？我已经修改了你的代码片段，让我知道这是否是实际行为？