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を1行に収めるために、黄色の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

HTML構造の表示方法を妨げる他のCSSルールがないことを確認してください。

于 2013-02-10T03:29:58.783 に答える