一格100％宽度和两个固定格在一行中

Question

我需要一行三格。

一个是大小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 S的，你可以得到这样的事情：

<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

因为您已将其设置为100％宽度。相对宽度（如您的百分比）适用于PARENT元素的宽度。因此，如果您的3个div的容器为600像素，那么您的第三个div将以600px的100％取代，而不是其他两个元素用尽的“剩余空间”。

你想要什么不能用纯CSS完成。您需要通过Javascript计算剩余空间，并设置第三个div的宽度，或者使其为固定宽度。

Answer 4

你不应该只是做不同意删除浮点数：left;在它的最后一个div工作？