幅が最大幅を超えているときにdivから外へ出るようにする方法は？

Question

私はその中にテキストと画像を持つページを持っています。スタイルはfloat：rightです。 テキストのmax-widthを設定したいが、イメージをテキストの外に出す。

JavaScriptを使用しない純粋な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の兄弟でなければなりません。