Jump to content
  • 0

В нижней части галереи перезжают фотографии

redcrazysun

Asked by redcrazysun,

 Share

Question

redcrazysun Explorer

redcrazysun

Posted
Posted

Добрый день. Помогите пожалуйста разобраться, почему в глее переезжают фотографии в конце списка? 4-8-12фото... держатся ровно, а когда 1,2,3 на новой строке все плывет.

http://pl.styleathome.ru/satin.html

 

Спасибо.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
VeniVidiVici Explorer

VeniVidiVici

Posted
Posted

Если я правильно понял вашу проблему, элементы съезжают из-за свойства float и разных размеров этих элементов.

Либо делаете одинаковую высоту для них, либо убираете float и ставите display: inline-block(для li элементов)

Link to comment
Share on other sites
  • 0
redcrazysun Explorer

redcrazysun

Posted
  • Author
Posted (edited)

Если я правильно понял вашу проблему, элементы съезжают из-за свойства float и разных размеров этих элементов.

Либо делаете одинаковую высоту для них, либо убираете float и ставите display: inline-block(для li элементов)

Спасибо, display: inline-block; помогло, позже с размерами фото поработаю.

Edited by redcrazysun
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • somik
      Не могу сверстать галерею адаптивно
      By somik
      Мб кто-то ради личного опыта сверстает мне галерею как на картинке: https://cloud.mail.ru/public/1idM/BUuGZ8T72
      Картинки порезаные: https://cloud.mail.ru/public/MhYY/7pnLJiLUC
      Требуется на флексах и адаптивно.
      Я так и не смог это сделать.
       
    • Svetlana_P
      Галерея Simple lightbox на телефоне
      By Svetlana_P
      Проблема со скриптом плагина simple lightbox. Самой решить не удалось. Подскажите направление, пожалуйста. Сайт http://borodin-art.ru/
      Когда с мобильного устройства нажимаешь на фото, оно открывается во всплывающем окне. Но когда я пытаюсь фото там увеличить растягиванием (двумя пальцами), то не получается. Наверное, из-за того что через свайп работает переход к предыдущему и следующему фото? Это между собой как-то конфликтует может? Или запрет стоит...
      Что обычно делают в таких случаях? Или проще плагин другой найти?
      Если что, вот урл скрипта http://borodin-art.ru/js/simple-lightbox.js
    • Oversec
      Проблема с fancybox
      By Oversec
      Все здравствуйте, я столкнулся с такой проблемой при создании галереи с помощью jQuery и fancybox. Не срабатывает функция fancybox, в браузере пишет: "Uncaught TypeError: $(...).fancybox is not a function" Может кто-нибудь сталкивался? Все файлы закачены на сервере и jQuery подключена.
      Вот страница с галереей:
       
      http://checkedin.esy.es/gallery.html
    • virtas
      Можно ли реализовать такую галерею
      By virtas
      Вот есть сайт,
      http://www.elliotterwitt.com/
      http://www.elliotterwitt.com/lang/en/index.html
      Можно ли реализовать такой вариант галереи на WordPress, может кто то уже делал похоже.
      Может есть плагин схожий?

      Или скрипт такой галереи.
    • Радосвет
      Масштабирование изображений в галерее
      By Радосвет
      Добрый день!
       
      Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров.
       
      Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой".
       
      У меня было желание настроить галерею более грамотно и удобно.
      Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит.
      У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных.
       
      В оригинале выглядит вот так:
       
      http://demo.megathe.me/heat/portfolio/people/
       
      Код стиля:
      /* =iosSlider----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;}.iosSlider .slider .item img { width: 100%; height: auto; float: left;}На моём сайте вот так:
       
      http://www.radosvet.ru/portfolio/margarita-portret/
       
      Код я немного изменил, добавив max-height: 600px:
      /* =iosSlider max-height: 600px;----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}В итоге вроде получилось то что мне нужно, но проблема в том, что при уменьшении окна вертикльные кадры "обрезаются" снизу.
       
      Я ещё дописал, добавив     min-height: 600px;:
      ----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px; min-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px; min-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px; min-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}Теперь почти всё так, как мне нравится. Но параметр максимальной высоты не позволяет адаптивному дизайну быть на 100% рабочим.
      Например, при сужении окна по высоте картинка на экран не помещается.
      А в мобильных браузерах вообще всё как-то странно смотрится В Firefox android при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает).
       
      Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки.
      Помогите, пожалуйста, что можно добавить или изменить?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept