如何将3个div左中右对齐？

Question

如何在不定义显式大小的情况下将3个div左中右对齐？

左侧应与左侧边缘对齐，右侧应与右侧边缘对齐。

以下方法无法实现：

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

- membersound

---

当我这样做时，通常至少有3个中的2个具有我可以指定的大小，我只需将第三个调整到其他两个即可。 - ppeterka

我不明白你写的代码有什么问题。它做了你描述的一切：http://jsfiddle.net/tagCs/ - Moshe Shaham

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>

演示

- Sowmya

---

我已经将text-align: center应用于包含3张图片的wrapper，有人能解释一下这为什么有效吗？ - Marian Pavel

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>

- zkanoca

---

你试过这个吗？对我来说不起作用：http://jsfiddle.net/eqAyg/ - membersound

我不小心将float属性输入到了主div的样式中，它应该在每个内部div中。 - zkanoca

Answer 3

这是一个示例，演示了如何通过正确排序来放置浮动元素。 jsFiddle 示例

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

- chriz

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>

- Rohan Kumar

Answer 5

实际上，如果不了解内容和布局模式，是不可能做到这一点的。但是作为一个起点，你可以尝试以下方法：

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

演示

- amiry jd