1

скрин проблемыпомогите не пойму почему браузер не слушается, При определенных размерах окна элементы li но не все а только те что должны стоять во втором ряду начинают прыгать не понятно почему ведь при большем или меньшем размере окна все норм. Даже если не уверенны посоветуйте хоть где копать на что обратить внимания, да и еще все что вы видите формирует php в цикле, так что если касяк там то все li должны бить кривыми, кароче буду рад любым вашим мыслям по поводу моей проблемы и да вот кстати та самая функция php

 `function show_photo($table_name){
        $config = config(); 
        $data = get_photo($table_name);
        $content = "";
        $li = "";
        for ($i=0; $i < count($data); $i++) {   
            $path = $config['img_folder'].$data[$i]["name"];        
            $width = $data[$i]["width"];
            $height = $data[$i]["height"];  

            $li = '<li class="gallery-box" style="width:'.$width.'%">'.
                      '<div class="heigth" style="padding-top:'.$height.'%"></div>'.
                      '<div class="gallery-box__image" style="background-image: url('.$path.')"></div>'.
                  '</li>';
            $content .= $li;
        }
            return '<ul>'.$content.'</ul>';             
    }
`
  [1]: https://i.sstatic.net/MGHwg.jpg

1 ответ 1

1

Судя по всему у вас появляется неправильная верстка из-за того, что вы задаете width через style в процентном соотношении. При определенных размерах окна сумма width элементов первого ряда может быть больше 100% (например, за счет округления). Попробуйте искусственно уменьшить width на небольшую величину для всех элементов или округляйте ширину width в меньшую сторону.

Также проверьте, чтобы у всех элементов была одинаковая высота. Вы используете float: left, а если высота элементов разная (даже на один пиксель), то он может прилипнуть так, как показано у вас на скриншоте.

Как вариант, можете использовать flex с flex-direction: row для задания правильного формирования плитки.

2
  • но, ширина в данных блоков заданна целым числом, я специально прикрепил фото что бы можно это это увидеть, и да я все же пробовал делать ширину меньше, на порядок меньше но нет результат такой же( а вот на счет высоты возможно, так как высота также в процентах, точнее в данном случае высота делается за счет padding-top но в процентах, и при определенных размерах браузер считает её не так как должен, спасибо за мысль ща пошаманю))) Commented 3 июл. 2017 в 16:48
  • вы были правы, если размер блока даже 1 сотую пикселя выше, соседа начинаются проблемы, но интересный момент ведет себя хром таким образом только в оконном режиме, в полно экранном же он разницу меньше пикселя не замечает)))) Commented 3 июл. 2017 в 17:13

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.