Почему промежутки и столбцы неровные или кажутся сплющенными?CSS

Разбираемся в CSS
Ответить
Anonymous
 Почему промежутки и столбцы неровные или кажутся сплющенными?

Сообщение Anonymous »

Я пытаюсь воспроизвести функцию календаря со страницы профиля leetcode, как это происходит далее.

Код: Выделить всё

        [\[calendar feature from leetcode\](https://i.sstatic.net/OMUSJ.jpg)][1]
Это сделано с помощью svg, поэтому адаптивная часть обрабатывается автоматически. Я поставил перед собой задачу воспроизвести это, просто используя CSS, и пока это не удалось.
Если вы перейдете по этой ссылке, вы увидите мою лучшую попытку.< /p>
Вы заметите, что промежутки между днями в календаре непоследовательны.
Для некоторых значений ширины области просмотра кажется, что они одинаковы по всей сетке, но не для всех из них. . Это тот случай, когда я указываю в качестве разрыва фиксированное или адаптивное значение. Действительно, я пытался установить промежутки как фиксированные единицы, но элемент «.day» все еще сдавливался промежутками, которые тогда выглядели бы больше, чем должны были бы быть. Это справедливо для горизонтальных и вертикальных промежутков.
Кроме того, я пытался воспроизвести макет, используя поля с плавающей запятой и встроенные блоки, но проблема осталась. Это вполне нормально, поскольку я использую только flex:none. Тем не менее, поведение по-прежнему происходило таким же образом. Я не понимаю, почему ширину некоторых ящиков уменьшают, а промежутки рядом с ними увеличивают. Я предполагаю, что моему пониманию распределения свободного пространства в чем-то недостает.
Я на самом деле рассчитываю не на гибкость при выполнении адаптивной части, а на единицы измерения. Это потому, что я не понимаю, как можно использовать flexbox для ограничения размеров .day в этом контексте.
Похоже, что размеры элемента .day обусловлены чем-то другим, что я могу сделать. написал, но не знаю что, так как
даже без зазоров они кажутся неровными. Размеры, сообщаемые браузером, кажутся равными, но визуально это не так.
Можете ли вы заметить, где у меня пробел в знаниях?
Можно ли добиться такого без интенсивного использования медиа-запросов?
Мне еще предстоит изучить контейнерные запросы, хотя я использую единицы измерения. Я их еще не освоил. Обратите внимание, что даже при использовании фиксированных единиц проблема остается.
Должен ли это быть маршрут для раскопок?
Мне бы хотелось получить отзывы по этому поводу. чего мне не хватает.

Подробнее здесь: https://stackoverflow.com/questions/783 ... s-squashed
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»