如何獲得一個浮動div占用所有可用空間

Question

我有以下HTML：

<div class="section">
    <p class="left">Some text</p>
    <div class="right">
        <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7, item 8</p>
    </div>
</div>

和CSS：

div.section {
    margin: 30px;

    background: blue;
}

div.section p.left {
    display: inline;
    margin-top: 4px;

    background: red;
}

div.right {
    float: right;
    word-wrap: break-word;

    background: green;
}

您可以在此Fiddle中玩這些游戲。 看起來像這樣：

相反，我希望它看起來像這樣，將右浮起的<div>包裝為沒有“ left” <p>可用寬度：

我如何才能做到這一點（請不要告訴我Javascript，應該有一種使用CSS的方法）。 當為浮動<div>指定寬度時，我得到了想要的包裝紙，但是我不能這樣做，因為左<p>的寬度是變化的。

更新資料

請允許我添加一些細節。 所有文本都是動態生成的，並且父<div>的寬度會更改。 可能有100個項目，而不是8個項目。分割<p>不是可行的解決方案。

Answer 1

也許

<div class="section">
    <p class="left">Some text</p>
    <div class="right">
        <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7</p>
        <p>item 8</p>
    </div>
</div>

似乎可以工作。

Answer 2

<div class="container">
<div class="left" style="float:left;width:10%">
Some Text
</div>
<div class="right" style="float:left; width:90%">
<p>item 1, item 2, item 3, item 4, item 5, item 6, item 7</p>
<p>item 8</p>
</div>
<div style="clear:both">perhaps this without text if you want nothing else to float below</div>

</div>

Answer 3

我嘗試了一下，我相信這是您想要的。 http://jsfiddle.net/2JLJR/4/

我給各個元素一個浮點數和一個百分比寬度。

div#wrapper {
 margin: 30px;
 float:left;
 background: blue;
 height:auto;
}

p.left {
 display: block;
 width:20%;
 float:left;
 background: red;
}

div.right {
 float: right;
 word-wrap: break-word;
 width:80%;
 background: green;
 text-align:justify;
}