HTML+CSSの要素の配置についての質問です。

画像と、文字列が入る要素の順序を入れ替えてますけど、ふたつほど。

画像だけに float: right; を指定する。

<style>
.koyouso{
    /* ※ float と width の指定を外す
    float:left;
    width:95%;
    */
    display:inline;
}
.gazou {
    background:url('../img/img.png') no-repeat scroll center;
    float:right;
    width:24px;
    height:24px;
    display:inline;
}
</style>
<div>
<span class='gazou'>画像</span>     <!-- ※画像の要素を先にする -->
<span class='koyouso'>子要素</span>
</div>

↑だと、文字列は、画像の下に流れ込む（float の普通の動作）感じになります。
もし、文章が入る領域の幅を一定にして、画像の下は空けておきたいのであれば、こんな感じ。

<style>
.koyouso {
    display:block;          /* ※ */
    padding-right: 30px;    /* ※24px 以上、右側の padding を取る */
}
.gazou {
    background:url('../img/img.png') no-repeat scroll center;
    width:24px;
    height:24px;
    display:block;          /* ※ */
    position: absolute;     /* ※ */
    right: 10px;            /* ※親要素の padding などに合わせて調整 */
}
</style>
<div>
<span class='gazou'>画像</span>     <!-- ※画像の要素を先にする -->
<span class='koyouso'>子要素</span>
</div>