Html 一行中的浮动div没有固定的宽度

文本1

文本2

文本3

---

红色div一直显示在图像下方。我希望红色div段落中文本的宽度决定其宽度。我需要将图像和红色分区并排放置，但我不想为黄色分区和红色分区提供固定宽度。我需要黄色分区的自动动态宽度，以便将图像和红色分区放在一行中

嗯。。。您的代码正在按您希望的方式工作。我只是在段落中添加了更多内容，以便您可以看到红色div扩展以容纳内容。图像与段落并排显示

<div style="background: green; float: right;">
  <div style="background: yellow;">
    <img style="float: left; width: 80px;" src="image.png" />
    <div style="background: red; float: left;">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
  </div>
</div>

文本1234567910

文本23456789101111111

文本3

以下是JS Bin的演示：

---

请确保没有任何其他CSS规则干扰HTML结构的显示方式。

我看不到图像下方。您在红色divs样式声明中缺少引用。啊，我忘记了我的图像是用

包装的，所以

浮动：左需要应用于锚定标记。我的错。啊，我错过了我的图像用
包装的事实，所以
浮动：左需要应用于锚定标记。我的错。
<div style="background: green; float: right;">
  <div style="background: yellow;">
    <img style="float: left; width: 80px;" src="http://www.google.com/doodle4google/images/carousel-winner2012.jpg" />
    <div style="background: red; float: left;">
      <p>Text 1234567910</p>
      <p>Text 23456789101111111</p>
      <p>Text 3</p>
    </div>
  </div>
</div>