CSS невозможно центрировать большое количество поплавка: левые элементы - PullRequest
Новая
       53

CSS невозможно центрировать большое количество поплавка: левые элементы

0 голосов
/ 12 апреля 2020

Я начну иллюстрировать мою проблему.

enter image description here

Как вы можете заметить, у меня есть контейнер, содержащий много элементов куба, все они плыл влево. Но проблема в том, что я не могу центрировать их внутри второго контейнера. Зеленая линия отмечает пустое пространство, которое есть в контейнере, потому что элементы перемещаются влево. Но я хочу, чтобы это пространство не существовало или как-то имело такой же размер слева от контейнера. Подводя итог, я хочу, чтобы по центру. Я пробовал flexbox, но центрируется только верхний контейнер, но он не центрируется на 100%. Я подозреваю, что это потому, что каждый куб имеет размер в пикселях, но я не знаю, как это сделать с другими методами.

Это ссылка скрипты и как мой текущий код выглядит

https://jsfiddle.net/qajyzkhu/3/

    <div class="calendar-container">
  <div class="fieldsContainer">


    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>



  </div>
</div>

css

    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
   width:90%;   
}

.cube-lived{
    float: left;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Попробуйте использовать css сетка 

display: grid;

.fieldsContainer{
   width:90%;   

   display: grid;
   grid-template-columns: repeat(auto-fit, 20px);
   grid-gap: 1px;
}

.cube-lived {
    background-color: rgba(6,30,57);
    height: 20px;
    width: 20px;
  }
0 голосов
/ 12 апреля 2020

исправил это с этим css

    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
  width:90%;   
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  grid-auto-rows: 20px;

}

.cube-lived{
    float: left;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }
...