Question

当浮动元素（例如list-items）时，它们并排放置，然后当容器中没有足够的空间（宽度）时，将其换行到下一行。 / p>

我想知道有没有办法，浮动的list-items / div可以在彼此之上显示。因此，2个组彼此并排浮动，如下面的示例2 ，示例1是常态：

我的线框中的框架是视口，因为我的布局将在屏幕上运行并水平滚动。

如果可以的话，我想在没有将所有2个项目包含在包含div中的情况下执行此操作。像这样......

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

并不是将物品1 + 2包裹在一个div中，而且相同的是3 + 4等等 - 父母的div与彼此并排浮动。

我的最终目标是创建一个这样的布局，它可以水平拖动而不是滚动条：

我在这里制作了一个Codepen：http://codepen.io/moy/pen/OVapeK

当所有内容都适合屏幕时，拖动工作...但是一旦在尝试拖动布局时在视口中裁剪div，它就会跳转。如果您的显示器不够宽，可以通过减少<figure>的数量和/或交替设置容器.project-list上设置的宽度来检查这一点 - 这是我需要解决的另一个问题！

谢谢，希望有人可以提供帮助！

修改

我实际上已经分叉了我的Codepen版本，其中我使用css-columns设置了列并居中：http://codepen.io/moy/pen/waQNyM

我设置了隐藏水平滚动条的[role="main"] {overflow: hidden;}。内容可拖动，但行为不符合预期。

同样在启动“拖动”后，顶部值设置为内联，因此它会使响应性/中心对齐变得混乱。