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

Question

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

这是 jsfiddle 上的 CSS 代码: 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>

Answer 1

您可以在外部 div 上使用 display:table，在内部 div 上使用 display:table-cell。 (并完全移除 float )

.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/