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 后面。目前 /strip.png 进入新行。谢谢。

Answer 1

您需要浮动：正确的第二个 div。

Answer 2

<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 3

如果您希望两个 div 元素占据相同的空间（即一个在另一个前面），您只能使用绝对定位来执行此操作。你也可以用背景来做，让浮动的 div 成为另一个 div 的孩子，但我认为这实际上会更复杂。在您的简单示例中，更改float: left为position: absolute就足够了。

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

您可能需要制作两个 div 的容器，position: relative以便绝对定位的 div 播放得很好。