在无限div内水平堆叠div

Question

我正在尝试创建一个本质上是一个水平、无限滚动的div（直到内部内容宽度）。我想在所述容器内堆叠其他 div，它们将水平地彼此相邻浮动。

本质上是水平无限画布：用户将能够向画布添加项目，并将其从左向右滚动。当新项目添加到右侧时，滚动条应该简单地增长。

垂直执行此操作非常简单：设置最大高度，设置溢出以滚动，完成。

像这样：

<div style="height: 95vh; max-height:95vh; border:5px solid green; overflow-y: scroll;">
    <div style="position:relative; min-height: 2000px; height: 2000px; border: 2px solid black; overflow: hidden;">TEST 0</div>
    <div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid white; ">TEST 1</div>
    <div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid yellow;">TEST 2</div>
    <div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid orange;">TEST 3</div>
    <div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid blue;">TEST 4</div>
</div>

但是，水平方向呢？这看起来并不容易做到...创建“垂直无限滚动效果”的必要参数不应该简单地应用于宽度，并在内部 div 上添加

float: left;

吗？

我已经尝试了以下方法，但没有产生任何结果，并且我一生都无法弄清楚为什么......正如你所看到的，它们仍然水平堆叠。

<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll;">
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black; display:inline; float:left;">TEST 0</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white; display: inline; float: left; vertical-align:top; ">TEST 1</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow; display: inline; float: left; ">TEST 2</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange; display: inline; float: left; ">TEST 3</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue; display: inline; float: left; ">TEST 4</div>
</div>

有人可以向我解释一下这个吗：如何实现横向滚动、无限滚动容器 div？

Answer 1

向父级添加

display: flex

将解决您的问题，不要忘记从子级中删除所有浮动。

旁注：

尽量避免

float

，它是一个古老的属性，并且有更好的方法可以以更优雅的方式实现你想要的任何东西，例如 Flexbox 或 Grid。

<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll;display: flex;height: 100px">
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black; display:inline;">TEST 0</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white; display: inline; vertical-align:top; ">TEST 1</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow; display: inline; ">TEST 2</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange; display: inline; ">TEST 3</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue; display: inline; ">TEST 4</div>
</div>