如何对齐3格左中右？

Question

如何在一行左中右对齐3个div而无需定义显式大小？

左边应该对齐最左边缘和右边缘。

下不起作用：

<div style="float: left;"> 
    left 
</div> 
<div style="float: right;"> 
    right 
</div> 
<div style="margin: 0 auto;"> 
    center 
</div> 

Answer 1

添加一个包装div，给text-align:center

CSS

.wrap{ 
     text-align:center 
    } 

HTML

<div class="wrap"> 
<div class="left"> 
    left 
</div> 
<div class="right"> 
    right 
</div> 
<div class="center"> 
    center sdv dg sdb sdfbh sdfhfdhh h dfh 
</div> 
    </div> 

DEMO

Answer 2

<div style="width:100%;margin:0 auto; padding: 0"> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     left 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     center 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
      right 
    </div> 
</div> 
<div style="clear:both"> 
</div> 

Answer 3

继承人如何做到这一点的例子通过将漂浮在正确的顺序。

jsFiddle Example

<div class="square" style="float: left;">left</div> 
<div class="square" style="float: right;">right</div> 
<div class="square" style="margin:0 auto !important;">center</div> 


.square { 
width:50px; 
height:50px; 
background-color:#ff0000; 
text-align:center; 
border: 1px solid #000; 
} 

Answer 4

试试这个

CSS

div{width:33%;} 

HTML

<div style="float: left;border:1px solid red;"> 
    left 
</div> 
<div style="float: right;border:1px solid green;"> 
    right 
</div> 
<div style="margin: 0 auto;border:1px solid blue;"> 
    center 
</div> 

Answer 5

实际上不可能，不知道内容和布局模式。但是，对于一个begining点，你可以试试这个：

HTML：

<div class="clearfix holder"> 
    <div class="column left"> 
     Some Contents Here... 
    </div> 
    <div class="column middle"> 
     Some Contents Here... 
    </div> 
    <div class="column right"> 
     Some Contents Here... 
    </div> 
</div> 

CSS：

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 
.holder{ 
    text-align:center; 
} 
.column{ 
    display:inline-block; 
    *display:inline; 
    *zoom:1; 
    width:auto; 
} 
.left{ 
    background-color:#ff0; 
    float:left; 
} 
.middle{ 
    background-color:#f0f; 
    margin:0 auto; 
} 
.right{ 
    background-color:#0ff; 
    float:right; 
} 

DEMO