Question

<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在一行中。

Answer 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结构的显示方式。

将DIV浮动在一行中，没有固定宽度

1 个答案: