文字与图片对齐

Question

我的网页上有一个图片，我想在其右侧包含文字，所以我有一些像这样的CSS：

.image {
  float:left
}

但是在达到文本中的某个点后，我想确保文本不再出现在图像的右侧，我希望它在图像下方。我可以使用什么标签将文本分成图像下方的新行？

Answer 1

将要显示在图像下方的文本换行到应用了样式clear: left的容器元素中。

CSS规范的Floats section有更多详细信息，包括说明clear属性如何工作的一个很好的示例。

Answer 2

将文本放在具有以下样式的div中

{ float:left; clear:left; }

下一个对象将显示在下方和左侧。

Answer 3

我相信您希望能够定义图像下方有多少可用空间。尝试调整图片的margin-bottom：

 IMG  text text text
 IMG  text text text
         text text text
         text text text
 text text text text
 text text text text

这样所有文本都可以在同一段落中。它会很好地包裹图像。

然后放置一个clear:both;样式的元素来禁用文本后的换行（以防文本不够长）