CSS流文本环绕图像

Question

tring to flow text around an image:

HTML

<div>
  <span id="photo"><img src="photo.png"</span>
  <span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>

CSS

#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**

文本围绕图像流动，但未对齐（对齐方式为左）。如果我将文本元素浮动到左侧，则对齐是正确的（如我所需的那样），但是文本不会围绕图像流动，而是在图像下方流动 - 我该怎么解决这个问题？

- Stick it to THE MAN

---

未关闭的标签：<img src="photo.png"</span> - Piskvor left the building

Answer 1

text-align 属性实际上属于包含块元素而不是内联元素。因此，请将其移动到包含块中：

div { text-align: justify; }

请参阅Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的16.2对齐：'text-align'属性：

此属性描述了如何对齐块中的内联内容。 值具有以下含义：

(已加粗)

- cletus

---

哈哈，成功了。非常感谢。有什么规则可以说明这种行为吗？（这样我就可以查阅并理解这种行为的原因了...） - Stick it to THE MAN

Answer 2

你需要将图片从 span 中取出，或者将 span 左浮动。

- Pekka