html - 如何让 float 的 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 做到这一点)。当我为 float <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>

似乎有效。