找到你要的答案

Q:Center a div between two divs that take full width

Q:中心两div div充分宽度之间

I'm trying to sit a fixed width div between two variable width divs.

What I have right now is this:

And I am trying to achieve this:

I've tried using display:table as well and was close, but could not get the 'left' and 'right' text to stay at the sides (I put the middle cell to margin: auto, but that means it kicks out space from the left and right 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/

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

我现在所拥有的是:

我正努力做到这一点:

我试过使用显示:表也很接近,但不可能得到“左”和“右”的文本在两侧(我把中间的细胞边缘:汽车,但这意味着它踢空间从左边和右边的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/

answer1: 回答1:

As you want the mid column to have the size you defined, you would need the box-sizing property.

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;
}

如果希望中间列具有所定义的大小,则需要框大小调整属性。

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;
}
answer2: 回答2:

I would use table and table-cell too, with some rules as follows.

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>

我也会使用表格和表格单元格,有些规则如下。

JSFiddle演示

.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>
answer3: 回答3:

http://jsfiddle.net/4s2qcarg/

*{
    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;
}
<div class="wrapper">
<div id="left">
    left
</div><!--
--><div id="mid">
    mid
</div><!--
--><div id="right">
    right
</div>
</div>

http://jsfiddle.net/4s2qcarg/

*{
    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;
}
<div class="wrapper">
<div id="left">
    left
</div><!--
--><div id="mid">
    mid
</div><!--
--><div id="right">
    right
</div>
</div>
html  css