将文本的 div 包装到 div 之外的图像的左侧答案

【问题标题】：Wrapping a div of text to the left of an image that is outside the div将文本的 div 包装到 div 之外的图像的左侧
【发布时间】：2016-02-16 03:46:40
【问题描述】：

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

当图像向左浮动时效果很好，下面的文本 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 的宽度没有帮助，因为这会阻止文本在图像下环绕以填充页面的宽度。

建议？

【问题讨论】：

【解决方案1】：

根据您的示例，将图像放在文本之前并删除 float:left

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

这是一个显示它工作的 jsfiddle

【讨论】：

【解决方案2】：

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

默认情况下，DIV 是块元素 - 如果将它们浮动到任何一侧，后续的 div 将放置在它的下方，除非它也浮动并且它们一起不比周围的容器宽。（<p> 标签也是如此，顺便说一句）。

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

【讨论】：