0

I want to align 3 sections in one line: one left, one in center and one on right. How can I do that?

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

fiddle: http://jsfiddle.net/ux4DD/164/

4

2 に答える 2

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 に答える
1

div 3 をすべての div の上に移動し、2 番目の div に追加margin: 0px auto;します。

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

于 2013-01-30T12:19:01.463 に答える