html - 自动宽度 CSS 不适用于我的中间部分

Question

我有三个分区，并尝试使用 CSS calc 属性为我的第一个和最后一个分区分配宽度。我正在尝试根据计算结果分配中间分区宽度。但是它没有为中间部分分配任何宽度。

HTML:

 <div style="width:400px;">
<div class="first">First Division Content Goes Here.</div>
<div class="divider"></div>
<div class="last">Second Division Content Goes Here.</div>
</div>

CSS:

 .first
{
height:50px;
background-color:#ff00ff;
float:left;
width: calc(50% - 10px);
}
.divider
{
width:auto;
height:50px;
background-color:#fff000;    
float:left;
}
.last
{
height:50px;
background-color:#00ffff;
float:left;
width: calc(50% - 10px);
}

问题是什么？如何根据 calc 属性的结果为我的中间部分分配宽度？

JSFIDDLE

编辑:

我收到了很多答案，例如“如果 div 中没有任何内容，Width auto 将不会自动分配宽度”。这样我就更新了我的 jsfiddle，在我的中间部分添加了一个文本。所以现在它有一些内容，需要自动调整宽度。

Updated JSFIDDLE

Answer 1

如果你想使用calc，你可以使用一个(非常复杂的)calc表达式来表示它的宽度:

.divider
{
    width: calc(100% - 2 * (50% - 50px)); 
    height:50px;
    background-color:#fff000;    
    float:left;
}

width: auto 没有效果，因为你的 div 是空的；这也是为什么宽度不会因为 div float 而“对齐”的原因。

编辑:是的...普通的 20px 可能是可行的方法。 :)

编辑 2:Here is an updated Fiddle with the expression above in the stylesheet.