将文本div包含在div之外的图像的左侧

Question

看起来这应该很简单，但我无法让它发挥作用。

当图像向左浮动时，它工作正常，下面的文本div将从图像的右侧开始并根据需要进行换行。

然而，当图像浮动到右边时，我无法让文本向左浮动然后包裹在图像下面。

这项工作

.left-image {
    float: left;
}
<div class="left-image"><img...></div>
<div class="right-text">...</div>

这不起作用 - 文字只出现在图像下面

.right-image {
    float: right;
}
.left-text {
    float: left;
}
<div class="right-image"><img...></div>
<div class="left-text">...</div>

这不起作用 - 图像显示在文本

下面

.right-image {
    float: right;
}
.left-text {
    float: left;
}
<div class="left-text">...</div>
<div class="right-image">...</div>

我知道如果图像与文本在同一个div中，它可以工作，但这不是一个选项，因为这些是Drupal内容类型中的单独字段。

限制文本div的宽度没有用，因为这可以防止文本在图像下包装以填充页面的宽度。

建议？

Answer 1

将图像放在文本之前，根据示例

删除float：left

.right-image {
  float: right;
}
.left-text {
  float: none;
}
<div class="right-image">...</div>
<div class="left-text">...</div>

这是一个显示正常工作的jsfiddle

https://jsfiddle.net/sarin/jtw721se/

Answer 2

不要将图像放在单独的<div>内，而只需将浮动类分配给<img>标记本身。并且也不要将文本放在单独的div中，而是将其与<img>标记一起写在一个容器中（通常这将是<p>标记，如下面链接的我的codepen示例中所示）。

默认情况下，DIV是块元素 - 如果将它们浮动到任何一侧，后续div将放置在它下面，除非它也浮动并且它们两者一起不比周围容器宽。 （同样适用于<p>标签，BTW）。

这是一个代码示例，显示了一个简单的示例：http://codepen.io/anon/pen/bEZYbO