如何在文本环绕中以行内方式显示<div>？

Question

我想要将一个 <div> 元素以内联方式展示，使其被文本包围。

我的代码如下：

<span>Here is some <div class="a"></div> text</span>

假设有一个名为"a"的类，定义如下：

.a {
    width:20px;
    height:20px;
    background-color:#f00;
}

结果应该像这样：

可行吗？感谢任何建议。

- rafalry

Answer 1

有一个CSS属性display: inline-block;，但我不知道它在浏览器中的兼容性如何（在我的FF中运行良好）。

我会为您做一些快速测试。

更新

我已在Chrome、FF和IE中进行了测试。在IE8中运作正常，但不适用于IE7。Chrome和FF都可以。

- Psytronic

---

inline-block在IE6/7中不起作用（或不正确），但如果您必须支持它们，则有一个解决方法：http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm - oezi

Answer 2

基本上只需添加display: inline-block;。您可能需要稍微调整一下，但这应该在除IE6之外的所有地方都有效。

- Flipke

---

适用于Safari、Chrome、Opera、FF、IE8，在IE6/IE7中无法正常工作。 - Flipke