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就可以了。

浮动div问题转移到新的一行

3 个答案: