0

我想将 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/

4

2 回答 2

1

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

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

于 2013-01-30T12:19:01.463 回答
1

添加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 }

演示

于 2013-01-30T12:22:38.943 回答