Я работаю над проектом, который должен поддерживать IE11, и я использую css столбцов, чтобы адаптивно перекомпоновывать некоторые аккордеоны. На первый взгляд мне показалось, что это отлично сработает, затем я начал взаимодействовать с аккордеонами, открывая их, раскрывая их содержание, которое временами перетекало в следующую колонку. Вот макет в разных размерах:
- На маленьких размерах аккордеоны складываются в 1 столбец.
- На средних и больших размерах макет становится разделенным на 2 столбца и аккордеоны распределяются по столбцам.
- При очень больших размерах макет становится разделенным на 3 столбца, а аккордеоны распределяются по столбцам.
Количество аккордеонов - динамическое c.
Есть ли способ предотвратить переполнение css столбцов? Я хотел бы сохранить css столбцов, если это возможно.
Так, например, допустим, что есть 12 аккордеонов в макете из 2 столбцов. Я всегда хочу 6 аккордеонов в левом столбце и 6 аккордеонов в правом столбце. Прямо сейчас, когда я раскрываю несколько аккордеонов в левом столбце, в конечном итоге аккордеон внизу левого столбца переместится в верхнюю часть правого столбца. Закройте аккордеон в левом столбце, и он переместится назад.
Я устанавливаю количество столбцов, ширину и зазоры разных размеров, примерно так:
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 550px;
-moz-column-width: 550px;
column-width: 550px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;