Блог

У меня есть большой содержащий элемент с примерно десятью DIVS внутри — большинство из них имеют ширину в среднем около 300 пикселей, и все они установлены для перемещения влево. Конечным результатом является макет типа виджета / сетки. Однако этот стиль был специально разработан с учетом адаптивного дизайна — мы используем медиа-запросы для настройки размера и количества столбцов в зависимости от устройства.

Проблема в том, что у нас может быть один или два блока двойной ширины или двойной высоты. Двойная ширина на самом деле не вызывает проблемы с плавающей (которую я все равно не могу решить), но проблема в двойной высоте. Двойная высота будет расширяться до следующей строки, но не позволяет другим блокам перемещаться слева от нее. Float-right — это не вариант, потому что высокое поле не всегда может быть справа.

Я пытаюсь найти способ динамически определять, куда может перемещаться каждый блок, например, решая головоломку. Я просмотрел несколько javascripts, таких как Masonry, JLayout и т.д., Но Они либо не работают, либо не решают проблему неправильных блоков.

Итак:

1. Я хочу избежать абсолютного позиционирования чего бы то ни было, потому что нам пришлось бы переделывать это каждый раз для каждого элемента, и они не будут казаться плавными.
2. Мне нужно разрешить двойную ширину и двойную высоту, но они могут присутствовать не всегда, и в конечном итоге пользователи должны иметь возможность определять свое местоположение, поэтому мы не всегда можем просто писать javascript на основе известного местоположения.
3. Я пробовал перемещать элементы с помощью jQuery, который действительно работает, но должен выполняться при изменении размера окна, что требует слишком большой активности и приводит к тому, что элементы мерцают взад и вперед при переходе по ширине, для которой требуется от трех столбцов до четырех.
4. Использование столбцов css3 не будет работать, потому что DIVS обрабатываются как текст и разбиваются на две части при переходе к следующему столбцу, а это также не допускает двойной ширины.

У кого-нибудь есть какие-либо идеи или предложения?

Используйте Jquery Masonry или Isotope, это позволит расположить все контейнеры в наиболее компактном расположении (или, если вы используете isotope, вы можете изменить его, чтобы расставить приоритеты в других формах расположения)

Что ж, если вас не слишком волнует порядок расположения ваших элементов, простым решением было бы следующее:

1. Добавьте свои элементы в #main так, чтобы все .tall виджеты добавлялись первыми. Перемещайте .tall виджеты вправо.
2. Аналогично, убедитесь, что все .wide виджеты добавлены последними, и переместите их влево.

В данном случае это работает, и я думаю, что это даст вам наиболее оптимальное использование пространства для любого набора этих элементов.

Я все еще не нашел никакого реального способа справиться с ситуацией. На данный момент я только что написал несколько пользовательских javascript для замены нескольких DIVS при изменении размера страницы.