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:

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