Сложная сетка с отзывчивым изображением не работает - PullRequest
Новая
       16

Сложная сетка с отзывчивым изображением не работает

0 голосов
/ 13 декабря 2018

Я пытаюсь создать макет со сложной сеткой (для меня) и в середине изображения с параметром максимальной ширины.Макет должен быть полностью адаптивным, и я должен использовать Bootstrap 3.

Мне известно следующее решение: 

<div class="container">
    <div class="row" style="margin-bottom:50px; display: flex;flex-wrap: wrap;min-height:600px;">
        <div class="col-md-3" style="background: #xccc; margin-bottom:-15px;padding:7px;">
            <p>
                Should be at top ...
            </p>            
            <div style="position:absolute;bottom:0;">
                <p>Lorem ipsum (bottom)</p>
                <p>
                2016-2018<br />
                Lorem ipsum dolor...<br />
                123<br /><br />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </p>
            </div>
        </div>
        <div class="col-md-7 text-center">
            <img src="https://dummyimage.com/600.png/09f/fff" class="img-responsive center-block" id="img" style="max-width:600px;" />
        </div>
        <div class="col-md-2" style="background: #ccc;">
            <p>
                Should be at top ...
            </p>
            <p>
                Schould be at bottom <br />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;float:left;margin-right:5px;" />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;" />
            </p>
        </div>

    </div>
</div>

http://jsfiddle.net/1m6gw2dt/

Это работает только прирабочий стол, но если я изменю размер окна, столбцы не переупорядочиваются для представления mobilde.Также изображение реагирует не на отзывчивый вариант.

И я не знаю, имеет ли мой пример кода не лучшую структуру для моих требований?

Редактировать Этопросто эксперимент, это не должно быть

.В результате Mobile должен иметь нормальное поведение: сначала появляется левая область, затем картинка, а в конце - правая область.

Редактировать 2 Чтобы уточнить, я вставил картинку

Большое спасибо за помощь.

1 Ответ

0 голосов
/ 13 декабря 2018

Я не уверен, что это именно то, что вам нужно, но если вы хотите подтолкнуть вверх и вниз, тогда Flexbox - это то, что вам нужно.

https://jsbin.com/bijekaqoji/edit?html,css,js,output

<div class="big-boy-box"> <p>I'm at the top</p> <p>I'm at the bottom</p> </div>

.big-boy-box { height: 500px; border: 5px solid red; display: flex; flex-direction: column; justify-content: space-between; }

Вы можете удалить это с помощью медиазапросов по мере необходимости.

...