Я создаю отзывчивый веб-сайт с помощью запросов HTML5/CSS3/Jquery и Media.Позиционирование Div вне ответной сетки
У меня есть страница с изображениями (галерея), которая находится внутри сетки в 16 столбцов, так что весы прекрасно подходят для планшета/мобильный и т.д.
Я также получил DIV, который абсолютное, расположенный за пределами сетки, и его целью является отображение текста/информации всякий раз, когда курсор зависает над одним из изображений (каждое изображение будет иметь свою собственную информацию).
Проблема:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
| _ _ _ _ _ _ _ _ | | _ _ _ _ _ _ |
||info | | 16 col | | ||in|16 col | |
|| | | grid | | => || | grid | |
||_ _ _| | gallery | | => ||_ |gallery | |
| | | | | | | |
| |_ _ _ _ _| | | |_ _ _ _ _| |
|_ _ _ _ _ _ _ _ _ _ _ _| |_ _ _ _ _ _ _ _ _ _|
При изменении размера окна браузера, галерея (основное содержание/сетка) перемещается в и оверлеи 'Info' DIV.
Я попытался сделать инфо DIV относительного позиционируется, который таким образом работал, но в конечном итоге щелкать реагирующий 16 Col контейнер ниже инфо DIV при масштабировании страницы вниз - не то, что я после ,
Вопрос:
Есть ли способ, чтобы получить эти два элемента, чтобы сидеть бок о бок, и как всегда будет видна на странице МИНИМУМ до того момента, когда запрос медиа для планшета (~ 959px широкий) пинает? (Тогда я могу просто удалить его)
Любые комментарии/отзывы/предложения очень ценятся. Спасибо.
Возможно, вы можете использовать flexbox, чтобы расположить их рядом друг с другом? Или используйте поплавки, если вам нужна лучшая поддержка браузера. Дайте info div ширину% и максимальную ширину. – Achshar