的 DEMO

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内没有任何内容，宽度自动不会自动指定宽度”。所以我已经更新了我的jsfiddle，在我的中间部分添加了一个文本。所以现在它有一些内容，需要自动调整宽度。

Updated JSFIDDLE

Answer 1

如果div中没有任何内容，宽度自动将不会自动指定宽度，因为它将宽度调整为内容长度。

所以手动指定宽度：

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

编辑：也许这就是您要寻找的，一个3列网格设计。使用calc并不是最好的做法，尝试为每个div指定一个宽度的百分比，它的结尾是相同的，复杂性较低。

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
     width: 40%;
}
.divider
{
    display: inline-block; width: 20%;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
     width: 40%;
}

检查小提琴 - ＆gt; http://jsfiddle.net/A94xT/5/

Answer 2

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

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

width: auto无效，因为您的div为空;这也是为什么宽度不是＆＃34;＃34; snpping＆＃34;由于div被浮动。

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

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

Answer 3

您可以根据从每侧移除10px来分配分隔符width: 20px。

.divider {
    width: 20px;
}

自动宽度CSS不适用于我的中间部门

3 个答案:

的 DEMO