jQuery Masonry/ Изотопная структура жидкости с правильными желобами и без упаковки

Я работал над получением правильной компоновки, работающей с Masonry/Isotope. По пути я столкнулся с множеством препятствий, последнее из которых мне не удалось устранить.

Моими целями были:

  1. Включите макет сетки изображения изотопного флюида, который изменяет размеры фотографий на лету
  2. Расположите сетку изображения горизонтально по центру окна
  3. Имейте желоб, который не заставляет правую колонку A) обернуть, или B) показать смещение от центра

Я начал смотреть на этот вопрос: jQuery Isotope: настройка флюида, такая как веб-сайт Бейонсе, работает только после изменения размера окна, но, хотя и работает для решения этой насущной проблемы, она не обрабатывает желоба и несколько столбцов.

Мне удалось отредактировать jsfiddle выбранного ответа, чтобы очистить его и развернуть:

http://jsfiddle.net/kwwMC/4/

(Пожалуйста, простите за отсутствие разрывов строк, но jsfiddle создавал   Между колоннами портится водосточный желоб).

Мне удалось решить проблему № 1; Задача № 2 может быть легко решена путем создания родительского div с заданной шириной и margin: 0 auto;; что оставляет нас с проблемой № 3:

Если вы используете CSS, чтобы добавить отступы или прозрачную рамку для каждого <li> элементы (скажем, margin-right: 10px; margin-bottom: 10px; или даже эквивалент с использованием border), мы сталкиваемся с проблемой. Внезапно правильный столбец переносится в следующую строку! Это, конечно, ожидаемое поведение, и можно было бы решить, просто display: inline-block; к <li> элементы (что я сделал) и white-space: nowrap; на родительский элемент (который я закомментировал).

К сожалению, если вы включите nowrap, это вызывает проблемное поведение, <ul> элемент не подчиняется родителю <div> ширина, и все изображения появляются в одной строке.

Главный вопрос: как я могу заставить это работать должным образом, чтобы у меня было три столбца, работающие с желобом между ними, но идеально выровненные справа и слева от родительского элемента? Я даже пытался создать плавающие изображения, но с изотопом происходит странное поведение.

Источник

1 ответ

Решение

Ага! Похоже, что я должен быть в состоянии сделать это с помощью следующего примера кода:

http://jsfiddle.net/remus/4fYUb/

Чтобы включить желоб, я просто добавил outline: 10px solid white; к css.

Источник
Другие вопросы по тегам