проблема с созданием адаптивного блока

309

27 июня 2017, 21:41

Добрый день, при создание блока с картинка возникла проблема что при сужение все валиться куда попало, хотелось бы чтоб переносилось по 2 блока. И нижние картинки были по центру, с помощью бутстрап

<div class="preim">
<div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div></div>
<div class="preim">
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
    <div><img src="" alt=""><p></p></div>
</div> </div>
</div>

ссылка на страницу http://advancedfood.ru/o_kompanii

Answer 1

Зачем Вам это? У Вас бутстрап подключен же.

<div class = "row">
    <div class = "col-md-3">...</div>
    <div class = "col-md-4">...</div>
    ....
 </div>

Всё давно придумано. С таким вариантом ничего никуда не поползет. Плюсом, можно настроить отобрадение на разных устройствах как нужно.

Ознакомиться с сеткой Bootstrap можно тут: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

На русском: http://bootstrap-3.ru

Answer 2

Если вам не нужна поддержка IE9 (что вряд ли), то используйте для этого flexbox http://html5.by/blog/flexbox/

Сейчас же все валится туда, куда должно :-)

Answer 3

Предлагаю воспользоваться возможностями уже подключенного к сайту бутстрапу. Попробуй такую структуру.

<div class="row">
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
</div>
<div class="row">
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
        <div class="col-md-1 text-center"><img src="" alt=""><p></p></div>
</div>

Класс text-center - в бутстрапе выравнивает содержимое блока по центру.

"row" обозначает ряд, а col-md-1 - ячейки (столбец).

Бутстрап сам решает, какое кол-во картинок ему переносить в зависимости от сужения и размера картинки. Разные телефоны имеют разные расширения, если на одном телефоне оптимально - 2, то на другом это одна картинка в "ряду" или три. Предлагаю не переживать по этому поводу. Если две штуки на ряд - это категорично, напиши. Подправим код