html设置页面剩余部分的宽度

Question

我有一个内联块跨度，占页面宽度的80%，紧接着我有另一个内联区块跨度，占0.753em，现在我想做第三个，占其余的。

也许在代码中会更清楚：

<span style="width:80%; display:inline-block; background-color:lime"></span>
<span style="width:0.753em; display:inline-block"></span>
<span style="width:[?????????]; display:inline-block;background-color:lime"></span>

如前所述，第三个跨度应该占据页面的其余宽度，我应该设置它的宽度是多少？

谢谢。

Answer 1

我想不出使用display: inline-block的方法。

相反，这里有一个基于float的解决方案：

实时演示

<span style="float:left; width:80%; height:30px; background-color: lime"></span>
<span style="float:left; width:0.753em; height:30px; background-color: green"></span>
<span style="display:block; overflow:hidden; height:30px; background-color:red"></span>

为什么这样做？http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-浮动的空间