如何以动态宽度，第一个左，第二个中心，第三个右边水平居中3个div元素？

Question

我在父div中动态更改了三个div。 我需要将第一个div对齐，中间的一个必须以相同的填充为中心，左边和右边的div，右边的一个对齐到右边。

听起来很简单，但不是（至少对我而言）！

Answer 1

设置每个元素的宽度33％ 请参阅jsfiddle demo http://jsfiddle.net/4VaRD/2/

<强> HTML

<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

<强> CSS

.container{
width: 100%;
}
.left{
background-color: red;
float: left;
text-align: left;
width: 33%;
}
.center{
background-color: green;
float: left;
text-align: center;
width: 33%;
}
.right{
background-color: blue;
float: left;
text-align: right;
width: 33%;
}

Answer 2

你可以使用display：flex;请参阅此主题：Why does display: -ms-flex; -ms-justify-content: center; not work in IE10?

或使用inline-block和text-align:justify;伪造它 这里是一个codepen示例，如果你想包含旧的IE http://codepen.io/gcyrillus/pen/Babcs：

<div class="justify">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
  <!--[if lte IE 7]>
     <span class="ie"></span>
  <![endif]-->
</div>

Answer 3

有人做了以下小提琴，但编辑错误的方式！ 不幸的是，我不知道是谁做的。 也许spezzino，但我不确定：

<强> HTML

<div class="wrap">

  <div class="left">
    left
  </div>

  <div class="right">
    right
  </div>

  <div class="center">
    center
  </div>

</div>

<强> CSS

.wrap{
  text-align:center;
}

.left{
 float: left;
 background:grey
}

.right{
 float: right;
 background:red
}

.center{
 text-align:left;
 background:green;
 margin:0 auto; 
 display:inline-block
}

http://jsfiddle.net/66fCm/136/

无论如何，这完美无缺:-) 任何人都可以将这篇文章标记为正确的答案，因为我不能，因为声誉较低。

Answer 4

如果我理解您的问题，您可以使用列表获得结果。

所以只需在列表项中包含左，中，右div的内容，并使用显示内联和填充，如下所示：

li {
padding: 0 50px 0 0;
display: inline;
}

我为你做了一个小提琴。 希望你能用它。

jsfiddle

Answer 5

您也可以实际使用表格。由于表行为，这将很好地工作。