将一个div放在两个div之间，它们占据全宽

Question

我试图坐在两个可变宽度div之间的固定宽度div。

我现在拥有的是：

我正在努力实现这一目标：

我已经尝试过使用display：table并且很接近，但是没有得到＆＃39; left＆＃39;并且＆＃39;对＆＃39;保持在两侧的文本（我把中间单元格放到边距：auto，但这意味着它从左边和右边div开出空间）。

<div id="left">left</div>
<div id="right">right</div>
<div id="mid">mid</div>

#left
{
    float: left;
    border: solid 1px red;
    text-align: right;
}

#mid
{
    margin-left: auto;
    margin-right: auto;
    border: solid 1px red;
    text-align: center;
    width: 60px;
}

#right
{
    float: right;
    border: solid 1px red;
    text-align: left;
}

http://jsfiddle.net/0vraqfLf/

Answer 1

如果您希望中间列具有您定义的大小，则需要box-sizing属性。

HTML

<div id="content">
    <div id="left">left</div>
    <div id="mid">mid</div>
    <div id="right">right</div>
</div>

CSS

#content {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

#left,
#mid,
#right {
    border: solid 1px red;
    display: table-cell;
    padding: 2px 5px;
    box-sizing: border-box;
}

#left {
    text-align: right;
}

#mid {
    text-align: center;
    width: 60px;
}

#right {
    text-align: left;
}

Answer 2

我也会使用table和table-cell，但有一些规则如下。

<强> JSFiddle Demo

.table {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.table > div {
    display: table-cell;
    border: solid 1px red;
}
.table > div:nth-child(1) {
    text-align: right;
}
.table > div:nth-child(2) {
    text-align: center;
    width: 60px;
}
.table > div:nth-child(3) {
    text-align: left;
}

<div class="table">
    <div>left</div>
    <div>mid</div>
    <div>right</div>
</div>

Answer 3

http://jsfiddle.net/4s2qcarg/

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.wrapper{
    width: 100%;
}
.wrapper div{
    border: solid 1px red;
    display: inline-block;
    vertical-align: top;
        
}
#left,
#right{
    width: calc(50% - 30px);
}
#mid{        
    text-align: center;
    width: 60px;
}
#right{
    text-align: right;
}

＆＃13;

<div class="wrapper">
<div id="left">
    left
</div><!--
--><div id="mid">
    mid
</div><!--
--><div id="right">
    right
</div>
</div>

＆＃13;

＆＃13;

＆＃13;