jquery - 将 3 个 div 与自动边距对齐

Question

我想将 3 个部分对齐在一行中：一个在左侧，一个在中心，一个在右侧。我怎样才能做到这一点？

<div id="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS：

#container{
    border:1px solid #ff0000;
    width: 100%;
    display: inline-block;
    height:auto;
  }

.div1{background: lime;border: 1px solid #ccc;width:100px;height: 100px; float: left}
.div2{background: yellow;border: 1px solid #ccc;width:100px;height: 100px; float:left}
.div3{background: orange;border: 1px solid #ccc;width:100px;height: 100px; float: right}

小提琴：http: //jsfiddle.net/ux4DD/164/

Answer 1

将 div 3 移动到所有 div 的顶部并添加margin: 0px auto;到第二个 div。

http://jsfiddle.net/ux4DD/165/

Answer 2

添加text-align:center到 #container 并float:left从中间 div 中删除

    #container{
    border:1px solid #ff0000;
    width: 100%;
     text-align:center; padding:0; font-size:0
  }
.div1{background: lime;border: 1px solid #ccc;width:100px;height: 100px; float: left; font-size:14px }
.div2{background: yellow;border: 1px solid #ccc;width:100px;height: 100px; display:inline-block; font-size:14px}
.div3{background: orange;border: 1px solid #ccc;width:100px;height: 100px; float: right; font-size:14px }

演示