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并从中间div中删除float:left

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

<强> DEMO

将3个div与自动边距对齐

2 个答案: