如何获得浮动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;
}

您可以在this Fiddle中使用这些内容。它看起来像这样：

我希望它看起来像这样，将右浮动的<div>包裹到可用的宽度，而不使用“左”<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;
}