html - 如何让浮动 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 做到这一点）。当我为 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>

似乎工作。

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