css - CSS：float：rightとfloat：leftを同期させますか？

Question

最初に：このフィドルを参照してください：http：//jsfiddle.net/gamehelp16/77ssr/

だから、これらの画像：

_{（出典：placekitten.com）}

float:rightプロパティを使用します

そしてこの画像：

_{（出典：placekitten.com）}

float:left;プロパティを使用します

そして、フィドルで見ると、3番目の画像（float：左の画像）は2番目の画像（大きな画像）の横にありません

私の質問は、3番目の画像を作成する方法は2番目の画像の右側にあるということです。純粋なCSSソリューションが必要です

ありがとう

アップデート：

私はそれを行う別の方法を考え出しました。2番目の画像のフロートを左に設定することによってです：D

Answer 1

大きなものを浮かせて、小さなものをブロック表示に設定することができます。JSFiddleで表示します。

html

<img src="http://placekitten.com/200" id="left">
<img src="http://placekitten.com/100">
<img src="http://placekitten.com/100">

css

img:not(#left) {
  display: block;
}
#left {
  float: left;
}

それらを1つの単位として移動するには、次のように親コンテナ要素に設定できます。

Answer 2

cssのfloat要素は、実際の要素ではなくページを基準にしています。2つのdivを作成し、これらのdiv内でimgsを配置することをお勧めします。または、上部または左側の要素を使用することもできます。選択はあなた次第です。