css - フローティング div の問題が新しい行に移動する

Question

<div style="float: left"><a href="url" title="title">
<img src="/name.png" /></a></div>
<div style="text-align: right"><img src="/strip.png" /></div>

/strip.png を /name.png の後ろに移動するには、ページの幅が 1 行に収まらない場合にどうすればよいですか。現時点では、/strip.png は新しい行に移動します。ありがとう。

Answer 1

<div style="display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;" >
  <div>
    <a href="url" title="title"><img src="/name.png" /></a>
  </div>
  <div><img src="/strip.png" /></div>
</div>

http://jsfiddle.net/33XZ4/

Answer 2

両方の div 要素を同じスペースに配置する (つまり、一方を他方の前に配置する) 場合は、絶対配置でのみこれを行うことができます。背景を使用して、フローティング div を他の div の子にすることもできますが、実際にはもっと複雑になると思います。あなたの簡単な例では、に変更float: leftするposition: absoluteだけで十分です。

http://jsfiddle.net/ExplosionPIlls/HLNTC/1/

position: relative2 つの div のコンテナーを作成して、絶対位置の div が適切に再生されるようにする必要がある場合があります。

Answer 3

フロートする必要があります: 2 番目の div を右にします。