너비가 최대 너비를 초과하면 div에서 나가는 이미지를 만드는 방법은 무엇입니까?

Question

나는 그 안에 텍스트와 이미지가있는 페이지를 가지고 있는데, 스타일은 float : right이다. 텍스트의 최대 너비를 설정하고 싶지만 이미지가 텍스트 바깥으로 나오게하십시오.

자바 스크립트를 사용하지 않고 순수한 CSS로 처리 할 수 ​​있습니까?

이 나는 ​​일반 화면과 와이드 스크린에 그것을보고 싶은 방법입니다

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

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

Answer 1

사용 CSS3 media queries : 당신은 기본적으로 이미지 주위의 텍스트 흐름을 가질 수 있지만, 뷰포트가 넓은 경우 다음 당신이 CSS를 무시하고 사용하는 컨테이너 DIV 외부 이미지의 위치를이 방법을 사용

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

음수 여백 또는 절대 위치.

More about responsive web design with CSS.

Answer 2

style="position:absolute;right:100px;" 당신이 원하는 당신을 줄 수 있습니다. position:absolute 인 경우 float:right을 지정할 필요가 없습니다.

div 안에있는 img를 해당 div 외부에 표시하면 안됩니다. 이미지는 아마 아이들 대신 div의 형제가되어야합니다.