Блог

Я разрабатывал плату Kanban для общей системы, которую мы поддерживаем в работе. У меня все основные функциональные возможности работают, но я немного зацикливаюсь на стилизации. На следующем скриншоте показано, что у меня есть в настоящее время:

Существует основной 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;
  

И трудно понять, устранило ли это мою проблему, поскольку автоматическое изменение размера высоты «контейнеров» больше не работает

Поскольку вы используете значения с плавающей запятой, вам понадобится контейнер для каждой строки, который очищает предыдущую. Другим способом было бы удалить значение с плавающей точкой и установить для .kanban-container значение display: 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;
}