浮动布局 - 项目从上到下运行，而不是并排？

Posted 2023-05-08

【中文标题】浮动布局 - 项目从上到下运行，而不是并排？

【英文标题】：Floated layouts - items running up-down-up-down, rather than side-to-side?

【发布时间】：2015-10-21 14:00:00

【问题描述】：

当浮动元素（例如列表项）时，它们并排移动，然后当容器中没有足够的空间（宽度）时换行到下一行。

我想知道有没有办法让浮动的列表项/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;，它隐藏了水平滚动条。内容是可拖动的，但不符合预期。

同样在启动“拖动”后，内联设置了一个顶部值，因此它有点搞乱了响应/中心对齐。

【问题讨论】：

你试过css列吗？这应该会给你你想要的东西，尽管你将不得不忽略不支持 CSS 列的支持浏览器（旧的 IE）。您将必须指定列数，但由于我猜元素的数量将是动态确定的，因此您将需要一些 JS 将其应用为内联样式。 davidwalsh.name/css-columns

codepen.io/anon/pen/VLVgKV

我在想那个@connexo，实际上是要在我的帖子中提到它，但我必须忘记。这绝对是一个可能的解决方案，因为我没有人可以在这里反弹想法列可能是要走的路！

我刚刚用 Codepen 更新了我的帖子：codepen.io/moy/pen/waQNyM。这使用 CSS 列来创建所需的布局并水平滚动 - 虽然目前拖动有点无聊！

【参考方案1】：

flex-flow: column wrap可以做到

.flex-container 
    display: flex;
    height:200px;
    flex-flow: column wrap;
    background-color: green;

        
.flex-container > div 
    background-color: #fff;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
</div>

是https://www.geeksforgeeks.org/how-to-align-flexbox-columns-left-and-right-using-css中示例1的修改