Как заставить изображения выходить из div, когда ширина превышает максимальную ширину?

Question

У меня есть страница с текстом и изображениями внутри, со стилем float: right. Я хотел бы установить максимальную ширину для текста, но позвольте изображениям выходить за пределы текста.

Можно ли сделать это с чистым CSS, без JavaScript?

Вот как бы я хотел видеть его на обычном и широком экране:

+----------------------+    +-------------------+--------------+
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |     TEXT          |   |  IMG  |  |
|              |       |    |                   |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |     TEXT          |  BACKGROUND  |
|                      |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |                   |   |  IMG  |  |
|              |       |    |     TEXT          |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |                   |              |
+----------------------+    +-------------------+--------------+

                            <-----MAX-WIDTH----->

Answer 1

Использование CSS3 медиазапросов :

@media screen and (min-width: 600px) {
     .aClass {}
     .anotherClass {}
     /* properties in here only apply when the viewport is wider than 600px */
}

Используя этот метод, вы можете создать текстовый поток вокруг изображений по умолчанию, но если область просмотра широкая, вы переопределяете этот CSS иРасположите изображения вне контейнера div, используя отрицательные поля или абсолютное позиционирование.

Подробнее об адаптивном веб-дизайне с помощью CSS.

Answer 2

style="position:absolute;right:100px;" может дать вам то, что вы хотите. Обратите внимание, что вам не нужно указывать float:right, если у вас есть position:absolute.

Вы не должны иметь img, которые находятся внутри div, появляться за пределами этого div. Изображения должны быть, возможно, братьями и сестрами div вместо детей.