Расположение Div вне Responsive Grid

Question

Расположение Div вне Responsive Grid

0

Я создаю отзывчивый веб-сайт, используя HTML5/CSS3/Jquery и Media Queries.

У меня есть страница с изображениями (галерея), которая находится внутри 16-ти столбцовой сетки, поэтому она отлично масштабируется для использования планшета/мобильного телефона и т.д.

У меня также есть div, который абсолютно расположен за пределами сетки, и его целью является отображение текста/информации всякий раз, когда курсор зависает над одним из изображений (каждое изображение будет иметь свою собственную информацию).

Проблема:

 _ _ _ _ _ _ _ _ _ _ _ _         _ _ _ _ _ _ _ _ _ _
| _ _ _    _ _ _ _ _    |       | _  _ _ _ _ _      |
||info |  | 16 col  |   |       ||in|16 col   |     |
||     |  |  grid   |   |   =>  ||  | grid    |     |
||_ _ _|  | gallery |   |   =>  ||_ |gallery  |     |
|         |         |   |       |   |         |     |
|         |_ _ _ _ _|   |       |   |_ _ _ _ _|     |
|_ _ _ _ _ _ _ _ _ _ _ _|       |_ _ _ _ _ _ _ _ _ _|

Когда я изменяю размер окна браузера, галерея (основной контент/сетка) перемещается и оверлеет "info" div.

Я попытался сделать инфо - Див относительно расположенного, который таким образом работал, но в конечном итоге щелкать реагирующий контейнер 16 Col ниже информация DIV при масштабировании страницы вниз - не то, что я после.

Вопрос:

Есть ли способ заставить два элемента сидеть бок о бок, и для того, чтобы они всегда были видны на странице AT LEAST до такой степени, когда пин-медиа для планшета (~ 959 пикселей в ширину)? (Тогда я могу просто удалить его)

Любые комментарии/отзывы/предложения очень ценятся. Спасибо.

Alex 29 нояб. 2013, в 00:00

Источник

0

Может быть, вы можете использовать flexbox, чтобы расположить их рядом? Или используйте поплавки, если вам нужна лучшая поддержка браузера. Дайте информации div% ширину и максимальную ширину.
Achshar 29 нояб. 2013, в 13:51

Теги:

jquery

html5

css3

position

responsive-design

1 ответ

Ещё вопросы

Может быть, вы можете использовать flexbox, чтобы расположить их рядом? Или используйте поплавки, если вам нужна лучшая поддержка браузера. Дайте информации div% ширину и максимальную ширину.

Nandu Hulsure · Answer 1 · 2013-12-07T10-38-00.000Z

As i see the example this could be one of the reason 

1. if you are making the info div as relative then add the z-index property to it.
2. if you are making the info div as Absolute then provide the position property as left/top etc.