埋め込みスタイルシートを使用してインラインイメージを変更する

Question

イメージの周りに不規則な線を折り返して作成しようとすると少し問題があります。基本的に私はイメージの6 'スライス'を与えられています。私はイメージを1つのイメージにして錯覚を与えます。テキストはその左側にきちんとラッピングされています。

埋め込みスタイルシートでこれを行うように指示されました。私がやったことは、各スライスをdiv内にラップして（各スライスの幅を設定することができるように）、それらのdivをすべてidの "images"を持つdivにラップすることでした。

は今、内部に、私の頭の下に私は次のコードをしている：

<style type="text/css"> 
    #images { 
     float: right; 
     clear: right; 
     margin: 0em 0em 0em 2em 
    } 
</style> 

さて、画像は、のように、一緒にこれらの間に隙間を置いていないが、すべての画像が正しく右に浮いていない。実際、スライスは一種の左揃えのように見えます。彼らが正しく整列していれば、それは適切に見えるでしょう。

また、「インラインイメージ」にスタイルを適用するように求められています。これは、段落、見出し、およびアドレスと簡単に行うことができますが、私がやったようにdivの大部分を使用する以外に、インラインイメージにスタイルを適用するにはどうすればよいでしょうか？

ここで要求されるように、画像のdivのためのコードです：

<div id="images"> 
     <div style="width:6.7em"><img src="king1.gif" alt=""></div> 
     <div style="width:7.85em"><img src="king2.gif" alt=""></div> 
     <div style="width:11.45em"><img src="king3.gif" alt=""></div> 
     <div style="width:14.25em"><img src="king4.gif" alt=""></div> 
     <div style="width:15.5em"><img src="king5.gif" alt=""></div> 
     <div style="width:16.6em"><img src="king6.gif" alt=""></div> 
    </div> 

はまた、私は無駄に次のことを試してみました：画像の周り

img { 
    float: right; 
    clear: right; 
    margin: 0 0 0 2em; 
} 

Answer 1

なぜ余分なdivの？すべての画像に正確なスタイルを使用してください。http://jsfiddle.net/NGLN/B33kA/を参照してください。

img { 
    float: right; 
    clear: right; 
    margin: 0 0 0 2em; 
}