html - 将文本的 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/