Html 如何让浮动div占用所有可用空间

我有以下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>

你可以在家里玩这些。看起来是这样的：

相反，我希望它看起来像这样，将右侧浮动的

包装到没有“left”的可用宽度：

我怎样才能做到这一点（请不要告诉我Javascript，应该有一种方法可以用CSS做到这一点）。当我为浮动

指定一个宽度时，我得到了我想要的包装，但我不能这样做，因为左侧

的宽度不同

更新

请允许我补充一些细节。所有文本都是动态生成的，并且父级

的宽度会更改。可能有100项，而不是8项。拆分

不是一个可行的解决方案。

也许

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

一些文本
第1项、第2项、第3项、第4项、第5项、第6项、第7项

项目8

似乎有效。

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

一些文本
第1项、第2项、第3项、第4项、第5项、第6项、第7项

项目8

如果你不想让其他任何东西漂浮在下面，也许这个没有文本

我试过一点，我相信这就是你想要的。

我给每个元素一个浮点数和一个百分比宽度

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

---

这是动态文本。我给你一个占位符。宽度也会改变。如果你把这一点添加到问题中，它会有所帮助-我现在将思考的上限放在…

display:table是必须的？不，不是，我实际上把它改成了
display:inline。我没有意识到我必须更新Fiddle链接，现在我已经更新了。父div的宽度不同？
某些文本的宽度不同
？浮动右div的宽度不同？我的意思是我不能硬编码10%/90%分割或类似的东西。但是右浮动的
div
可能会比左浮动的
p
长。我希望它能扩展到使用尽可能多的空间，而不侵犯
p
。当你缩小浏览器的大小时，当你把浏览器变小时，你希望出现什么行为？正如问题中所述，我不能预先决定宽度，因为“某些文本”的宽度会改变。如问题中所述，我不能预先决定宽度，因为“某些文本”的宽度会改变。所以呢？横宽对这一点有好处。如果父div具有自动宽度。不，这样做不好。一个例子可能是10%-90%，下一个可能是25%-75%，我事先不知道会是哪一个。每个字段的大小绝对没有把握？你一定对它的尺寸有个大概的了解吧？
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;
}