css - Even width between inline elements

Question

I have three inline elements (lets call them squares) which are centered inside the parent div. What i would like to do is align first square to the left of the parent, second square to the center and the third square to the right. In other words, create equal inner margins between squares.

Do not forget that inline-block already adds some margin to the elements.

HTML:

<div id="five">

<div>
</div>

<div>
</div>

<div>
</div>

</div>

CSS:

#five {

    text-align:center;
    width:1110px;
}

#five > div {

    width:340px;
    background-color:red;
    height:200px;
    display:inline-block;
}

Answer 1

首先添加一个跨度，样式为：

#five > span {    
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

然后将text-alignfor更改#five为justify：

#five {
    text-align:justify;
    width:1110px;
}

JSFiddle

Answer 2

您可以通过以下方式实现此目的：

<div id="five">
 <div id="left">
 </div>

 <div>
 </div>

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

和：

#five {
 text-align:center;
 width:800px;
}

 #five > div {
  width:140px;
  background-color:red;
  height:200px;
  display:inline-block;
 }
 #left{
  float: left;
 }
#right{
 float: right;
}

这样，它将从左div到左，从右div到右对齐。

演示