CSS позиционирование и смещение в макете флюида

Question

CSS позиционирование и смещение в макете флюида

0

У меня есть обертка div с некоторым содержимым. Вот его css:

.wrapper{
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto;
    padding: 0.3%;
}

Теперь, в этом div, у меня есть еще один div, который я назову div2. У него нет соответствующих стилей, кроме косметических (фон, шрифт и т.д.). Его поведение состоит в том, чтобы просто взять всю ширину обертки div, независимо от ширины, масштабирования или размера экрана браузера. Это так, как ожидалось, и здесь нет ничего плохого. Я пытаюсь сделать дополнение к этому, и именно там у меня проблемы.

У меня есть изображение, которое я хочу отобразить, так что нижняя часть изображения находится в строке и касается верхней части div2, а в правом боковом конце div2, так что правый конец изображения также соответствует правый конец div2.

Это будет звучать достаточно просто, но я не хочу, чтобы этот образ возился с вертикальным пространством. Конечно, добавление изображения в заставке приведет к большему разрыву между div2 и любым элементом над ним, что означает, что я должен использовать position:absolute чтобы вывести изображение из регулярного потока страницы. Тем не менее, мои попытки сохранить изображение в этой же позиции, как описано, оказались безуспешными. Как я могу постоянно поддерживать это изображение и при всех возможных обстоятельствах отображения пользователя, не имея этого большого пробела?

Я попытался с помощью смещения CSS top и left, чтобы переместить изображение, но это не работает для всех шириных экранов/зуммирования/Разрешения/браузера, и это не то, что я могу практически использовать медиа - запросы для.

Hiigaran 14 апр. 2014, в 21:21

Источник

0

Можете ли вы включить код, с помощью которого вы пытались добиться этого?
webeno 14 апр. 2014, в 18:31

Теги:

html

css

image

css-position

1 ответ

Ещё вопросы

Можете ли вы включить код, с помощью которого вы пытались добиться этого?

TheFrozenOne · Accepted Answer · 2014-04-14T16-28-00.000Z

Я не совсем уверен, позвонил ли я вам, но я думаю, вам нужно:

#div2
{
   position: relative;
   width: 100%;
   overflow: visible;
}

#div2 img
{
   position: absolute;
   bottom: 100%;
   right: 0;
}

EDIT: Поместите изображение внутри # div2.

Таким образом, ваш образ всегда будет справа вверху # div2. Что вы хотели сделать?

Да, идеально! Я не ожидал использовать относительное позиционирование, хотя. Я думал, что все еще получу эту проблему разрыва. Спасибо!