Мобильная версияПеретаскивание ломает CSS в Vuejs ⇐ CSS
-
Anonymous
Перетаскивание ломает CSS в Vuejs
Я работаю над веб-сайтом, где мне нужно разместить по 3 карточки в строке, и все карточки можно перетаскивать из одного места в другое.
Раньше я использовал это перед добавлением перетаскивания, и в каждой строке было видно по 3 элемента.
.контейнер { дисплей: гибкий; оправдание-содержание: центр; /* Добавлено для включения прокрутки */ переполнение-у: авто; } .card-контейнер { дисплей: гибкий; flex-wrap: обертка; /* Центрируем карты по горизонтали */ разрыв: 10 пикселей; максимальная ширина: 1216 пикселей; /* Устанавливаем максимальную ширину контейнера */ маржа: 0 авто; /* Центрируем контейнер по горизонтали */ } .карта { гибкий: 0 0 расчет (33,33% - 10 пикселей); максимальная ширина: Calc(33,33% - 10 пикселей); поле внизу: 20 пикселей; размер коробки: граница-коробка; /* Включаем отступы и границы по ширине карты */ } Теперь, когда я добавил перетаскиваемый элемент, он испортил мой CSS, и теперь в каждой строке отображается только 1 карточка, и это не мой вариант использования. Ниже приведен обновленный код:
.контейнер { дисплей: гибкий; оправдание-содержание: центр; /* Добавлено для включения прокрутки */ переполнение-у: авто; } .card-контейнер { дисплей: гибкий; flex-wrap: обертка; разрыв: 10 пикселей; максимальная ширина: 1216 пикселей; маржа: 0 авто; } .карта { гибкий: 0 0 расчет (33,33% - 10 пикселей); максимальная ширина: Calc(33,33% - 10 пикселей); поле внизу: 20 пикселей; размер коробки: граница-коробка; } Как это исправить? Я застрял уже несколько часов? есть ли лучшая альтернатива перетаскиванию?
Я работаю над веб-сайтом, где мне нужно разместить по 3 карточки в строке, и все карточки можно перетаскивать из одного места в другое.
Раньше я использовал это перед добавлением перетаскивания, и в каждой строке было видно по 3 элемента.
.контейнер { дисплей: гибкий; оправдание-содержание: центр; /* Добавлено для включения прокрутки */ переполнение-у: авто; } .card-контейнер { дисплей: гибкий; flex-wrap: обертка; /* Центрируем карты по горизонтали */ разрыв: 10 пикселей; максимальная ширина: 1216 пикселей; /* Устанавливаем максимальную ширину контейнера */ маржа: 0 авто; /* Центрируем контейнер по горизонтали */ } .карта { гибкий: 0 0 расчет (33,33% - 10 пикселей); максимальная ширина: Calc(33,33% - 10 пикселей); поле внизу: 20 пикселей; размер коробки: граница-коробка; /* Включаем отступы и границы по ширине карты */ } Теперь, когда я добавил перетаскиваемый элемент, он испортил мой CSS, и теперь в каждой строке отображается только 1 карточка, и это не мой вариант использования. Ниже приведен обновленный код:
.контейнер { дисплей: гибкий; оправдание-содержание: центр; /* Добавлено для включения прокрутки */ переполнение-у: авто; } .card-контейнер { дисплей: гибкий; flex-wrap: обертка; разрыв: 10 пикселей; максимальная ширина: 1216 пикселей; маржа: 0 авто; } .карта { гибкий: 0 0 расчет (33,33% - 10 пикселей); максимальная ширина: Calc(33,33% - 10 пикселей); поле внизу: 20 пикселей; размер коробки: граница-коробка; } Как это исправить? Я застрял уже несколько часов? есть ли лучшая альтернатива перетаскиванию?
