Question

我列出了工人的路线。每个工人都有一条路线，路线内有任意数量的工单。在一条路线中可以有1-10个路线（相当于1-10个工人）和最多100个工单。

每个工作单列表都是sortable的{{1}}列表。工作订单可以在路线中重新排列，也可以拖到不同的路线。我所拥有的是父divs，其中包含所有子路由div。我希望父divs仅允许路由div水平显示在一行中。当我们点击6条或更多条路线时，父窗口应水平滚动，并禁止第二行工单。

它应该看起来像这样（R =带有*表示工单的路线）：

divs

不应该是这样的：

R  R  R  R  R
*  *  *  *  *
*  *  *  *  *
*  *     *  *
*  *     *
*  *
   * 
   *

因此，路线应水平显示，如果页面上有太多不适合，则使用滚动条。但是，包含这些路线的父R R R * * * * * * * * * * * * * * R R * * * * * * *可以垂直增长，以允许包含许多工单的长路线。

我尝试向父div添加各种CSS样式都无济于事。我得到的最接近的是设置一个div设置为父div，强制水平滚动。但是，这意味着如果路线太长，路线会被垂直切断。

有什么想法吗？

Answer 1

作为CSS-Tricks mentions，最好的方法可能是使用表格。看看这个小提琴的例子：

.container {
    overflow-x: scroll;
    width: 100%;
}

这也有助于整理您在表格单元格中可能更好的数据。桌子得到了糟糕的说唱，但肯定有它们的用途。

我不推荐的另一个选项是设置内部容器的宽度。如果宽度改变，这会很烦人，但你可以使用jQuery设置它。它可能比它的价值更多。