Html 使用CSS在div中水平分布不同的元素

这里是

假设我有以下HTML：

<div class="Trigger">click here</div>

<div id="TheContainer">
    <div class="One">this is some text</div>
    <input type="button" class="Two" value="button 1" />
    <input type="button" class="Three" value="button 2" />
</div>

我使用以下javascript显示/隐藏容器：

$(document).ready(function () {

    $('.Trigger').click(function () {

        var TheContainer = $('#TheContainer');

        if (TheContainer.is(':visible') === false) {
            TheContainer.show();  
        } else {
            TheContainer.hide();
        }       
    });
});

如您所见，我们有一个隐藏的固定宽度容器，其中包含3个元素：1个div和2个按钮，所有3个元素的大小都是可变的，因为这些元素的文本在运行时会发生变化

我希望在容器中均匀地水平分布3个子元素。我环顾四周，由于各种原因，现有的解决方案似乎都不适用于这种特殊情况

如何仅使用CSS水平均匀地分布这些元素？ 注意：我知道我可以在jQuery中通过计算宽度然后绝对地设置位置来完成这项工作，但我想看看是否有一个CSS唯一的解决方案

---

谢谢

编辑：根据新的详细信息调整答案

---

Flexbox将与您的距离尽可能近

支持：Firefox、Safari、Chrome、Opera、IE10

如果您愿意添加额外的标记，您可以使用

display:table cell

来伪造它，但这并不完美：

#容器{
宽度：100%；
显示：表格；
}
div{
显示：表格单元格；
宽度：33%；
}
分区：第n个孩子（2）{
文本对齐：居中；
}
部门：最后一个孩子{
文本对齐：右对齐；
}
这是一些文本

我相信这就是您想要的：

它需要在每个按钮周围创建一个div，这样按钮本身就不会太宽

<div id="button1"><input type="button" class="Two" value="button 1" /></div>

不，这不是我想要的：按钮不应该那么宽，只是均匀分布。哦。那么这个怎么样。。。（请参阅几分钟后编辑）至少，我需要IE8支持，这样该选项也不会起作用。此外，它还调整了容器的大小，这不是它应该做的：它的宽度为500px，并且不调整大小。没有flexbox，你可以实现他想要的。@Michael不是真的。你可以靠近，但这并不完美。修改任何元素的内容，您将看到只有Flexbox才能优雅地处理它。@frenchie我错过了您指定的宽度，给了它一个通用宽度（Firefox需要一个非自动的宽度）。您可以在这里看到一个500px宽的容器：。我还添加了另一种解决方案。

.triple-container {
    float: left;
    width: 33.333333%;
    text-align: center;
    border: 1px solid yellow;
    box-sizing: border-box;
}

.One{
    text-align: center;
    width: 60px;
    margin: 0 auto;
}

.Two{
    width: 20px;  
}

.Three{
    width: 20px;
}

#TheContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
    width: 100%; /* for old Firefox */
}

#TheContainer {
    width: 100%;
    display: table;
}

div {
    display: table-cell;
    width: 33%;
}

div:nth-child(2) {
    text-align: center;
}

div:last-child {
    text-align: right;
}

<div id="TheContainer">
    <div class="One">this is some text</div>
    <div><input type="button" class="Two" value="button 1" /></div>
    <div><input type="button" class="Three" value="button 2" /></div>
</div>

<div id="button1"><input type="button" class="Two" value="button 1" /></div>