html - 自动宽度CSS不适合我的中级师

我有三个划分，并尝试使用CSS calc属性为我的第一个和最后一个划分指定宽度。我正在尝试根据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内没有任何内容，宽度自动将不会自动分配宽度”。这样我就在中间添加了文本来更新了jsfiddle。所以现在它有一些内容，需要自动调整宽度。

Updated JSFIDDLE

最佳答案

如果要使用calc，则可以使用（非常复杂的）calc表达式作为其宽度：

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

width: auto无效，因为您的div为空；这也是为什么div浮动时宽度不会“捕捉”的原因。

编辑：是的...普通的20px可能是要走的路。 :)

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

关于html - 自动宽度CSS不适合我的中级师，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23955097/