html - CSS 样式化看板 - 调整大小和重新定位 DIV 以适合内容

Question

我一直在为我们在工作中维护的通用系统开发看板。我的核心功能都可以正常工作，但在样式上有点卡住了。以下屏幕截图显示了我目前拥有的内容:

有一个包含所有“列/容器”的主 DIV，其样式如下:

.kanban-board {
    height: calc(100% - 60px);
    width: calc(100% + 20px);
    display: normal;
    padding-bottom: 0px;
    overflow-y: scroll;
}

这个 div 包含一系列“容器”——每个灰色列都是另一个 DIV 样式:

.kanban-container {
    float: left;
    clear: right;
    margin: 20px 10px 0px 10px;
    border-radius: 5px;
    background-color: #eaebed;
    width: 300px;
    padding-bottom: 0px;
    padding-left: 6px;
    min-height: calc(50% - 20px);
    display: table;
}

请注意 - 可能有任意数量的这些“容器”，因此它们目前按照上面的屏幕截图换行到下一行。每个“容器”DIV 都包含一个未排序的可排序列表 (UL)，其样式如下:

.kanban-sortable {
    list-style-type: none;
    margin: 0;
    padding: 2px;
    min-height: 30px;
    border-radius: 5px;
    height: 100%;
    width: 285px;
    display: table-row;
}

如果您回头看看屏幕截图，第一行的最后一个“容器”超出了其他容器的(最小)高度……似乎没问题，直到最长的不是行中的最后一个:

现在它看起来很垃圾...而且我不知道如何对其进行排序。我已经检查了其他一些看板示例，我的另一个选择是使用 X 滚动条从页面向右移动 - 但我当前的规范要求我解决这个问题。

我希望我已经提供了足够的信息来快速修复。 顺便说一句 - 我很乐意解决我在示例中可能犯的任何其他新手错误。

更新 我已经尝试过使用 display: inline-block;(在 .kanban-container 中)而不是:

float: left;
display: table;

而且很难看出它是否解决了我的问题，因为“容器”高度的自动调整大小不再有效

Answer 1

由于您使用的是 float ，因此每一行都需要一个容器来清除前一行。另一种方法是删除 float ，并将 .kanban-container 设置为显示:inline-block。如果您需要其中的表属性，则必须添加一个内部容器，但坦率地说，我对此处使用的所有样式以及它们附带的 !importants 感到有点困惑。

<div class="kanban-row">
    <div class="kanban-container">
    <div class="kanban-container">
    ...
</div>
<div class="kanban-row">
    ...

CSS:

.kanban-row {
    clear: left;
    overflow: hidden; // may not be necessary
}
.kanban-container {
    float: left;
}

或(没有行):

.kanban-container {
    display: inline-block;
}