在 div 中向右下浮动一个 span。

Question

我有这段代码可以将一个div浮动到另一个div的右下角，但是这个span会被固定在左上角。可能是重复问题，请参考如何使一个div浮动到容器底部？

<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >    
  <span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>

有没有其他的方法来放置这个元素？

- user823527

---

给 div 元素设置相对定位，给 span 元素设置绝对定位，并将 bottom 和 right 属性设置为零。 - j08691

澄清你的问题，你想让这个 span 与其他项目保持流动。我能想到的唯一明智的解决方案就是你已经拥有的（减去垂直对齐，这没有意义），所以你可能在做别的错误的事情。 - sg3s

参见：将文本环绕在右下角的 div 周围。 - Phrogz

Answer 1

你可能需要正确地将HTML/CSS分离开来。

你的代码应该像这样：

HTML:

<div>
    <span>Absolute right bottom aligned to div...</span>
</div>

CSS：

div { position: relative; }
div > span { position: absolute; right: 0; bottom: 0; }

显然，您的div应该具有超过span的高度/宽度，但通常这是一种非常可接受的方法。 这不会使div的内容“流动”围绕span，但这并没有明确说明。正如所说，如果在这种情况下您拥有的内容无法正常工作，那么问题可能出现在您的其余代码中。

- sg3s

---

你应该把CSS和HTML分开。 - Andrew Koper

Answer 2

vertical-align非常特殊，需要特别注意才能正常工作（这就是为什么我几乎从不使用它的原因）

在span上： position:absolute; bottom:0; right:0;

并在父div上设置高度/宽度，你就可以了。

- locrizak

---

-1 绝对定位元素不会使其“浮动”（导致内容围绕它换行）。 - Phrogz

如果你仔细阅读问题，你会发现div中没有其他内容。还有两个不同的请求“将div浮动到右下角”和“是否有一种不同的方法来放置span”，这是解决后者即实际问题的。我假设“float”术语来自“float:right”，并且在第一次使用时并不是正确的术语，而是想要实现的目标。 - locrizak

不要对由于问题质量差而得出的答案进行负评。+1 - sg3s

@sg3s 不，我会对那些在我（个人的、有限的、可能是错误的）看法下没有真正回答问题的答案进行负评。我也会对质量差的问题进行负评。 :) 如果提问者回来澄清说不需要“浮动”，我肯定会改成+1。 - Phrogz

@Phrogz 我想我不应该在阅读实际答案之前点赞:s 这个解决方案是不完整的，至少应该为包装div设置位置才能正常工作。 - sg3s

@Phrogz，你是在说我的回答很差吗？但你却以问题完全重复为基础关闭了这个问题，而其顶部答案与我的相同...？这没有多少意义。 - locrizak