html - 三个固定div和一个灵活

我有一个div，里面还有其他四个div。最后三个具有固定宽度，但是第一个需要水平调整大小。

这是带有CSS的jsfiddle上的代码：
http://jsfiddle.net/nsCzp/

我在这里找到了一些答案，但无法正常工作。

<div _unidade="1" class="unidade">
    <div class="unidade nome media">Canoinhas</div>
    <div class="unidade orcado media">9944</div>
    <div class="unidade realizado media">8467</div>
    <div class="unidade link media">1/div>
</div>

最佳答案

您可以在外部div上使用display:table，在内部div上使用display:table-cell。 （并完全清除浮子）

.unidade {
    height: 40px;
    line-height: 40px;
    padding: 5px;
    text-shadow: 0 0;

    display:table;
    width:100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.unidade .unidade{
    display:table-cell;
}

http://jsfiddle.net/gaby/nsCzp/2/上的演示