0 
<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>

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

4

1 回答 1

1

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

<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>

这是 JS Bin 的演示：http: //jsbin.com/atozim/1

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

于 2013-02-10T03:29:58.783 回答