2013-11-28 6 views
0

Я создаю отзывчивый веб-сайт с помощью запросов HTML5/CSS3/Jquery и Media.Позиционирование Div вне ответной сетки

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

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

Проблема:

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

При изменении размера окна браузера, галерея (основное содержание/сетка) перемещается в и оверлеи 'Info' DIV.

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

Вопрос:

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

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

+0

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

ответ

0
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. 
Смежные вопросы