一个100％宽度的div和一行中的两个固定div

Question

我需要一行三个div。

一个是尺寸200px，第二个300px，最后一个div应该是剩下的。

为什么我的最后一个div位于新行？

<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="float: left; width: 100%; background: #334455">c</div>

Answer 1

其他人已经表示100％是页面宽度的100％..但我不同意那些说'无法用'普通'CSS的用户

<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="overflow: hidden; background: #334455">c</div>

Answer 2

因为通过指定width: 100%，您已告诉第三个div填充页面的整个宽度，而不仅仅是剩下的内容。通过添加几个包装器div，你可以得到这样的东西：

<div style="float: left; width: 100%">
   <div style="margin-left: 500px; background: #334455">c</div>
</div>

<div style="float: left; width: 500px; margin-left: -100%">
   <div style="width: 300px; float: left; background: #223355">a</div>
   <div style="width: 200px; float: right; background: #223344">b</div>
</div>

哪个应该呈现你想要的方式。

Answer 3

你不应该只需要移除浮子：左;在最后一个div工作？

Answer 4

因为您已将其设置为100％宽度。相对宽度（例如百分比）适用于PARENT元素的宽度。因此，如果这3个div的容器是600px，那么你最终会得到你的第三个div占用600px的100％，而不是其他两个元素用完的“剩余”空间。

使用纯CSS无法实现您想要的功能。您需要通过Javascript计算剩余空间并设置第三个div的宽度，或者使其固定宽度。