html设置页面的其余部分

时间:2011-05-01 00:18:44

标签: html css layout width


我有一个内联块跨度,占据了页面宽度的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>

如上所述,第三个跨度应占据页面宽度的其余部分,我应该设置多大的宽度?

感谢。

1 个答案:

答案 0 :(得分:9)

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

相反,这是一个基于float的解决方案:

Live Demo

<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-room-for-floats