Question

以下是jsFiddle

假设我有以下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>

和以下CSS：

#TheContainer{
    width:500px;
    height:40px;
    padding:10px 30px;  
    display:none;
    background:red;}

.One{float:left;}
.Two{float:left;}
.Three{float:left;}

我使用以下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解决方案。

由于

Answer 1

我相信这正是您所寻找的：http://jsfiddle.net/gq8s4/5/

它涉及在每个按钮周围创建一个div，因此按钮本身并不是很宽。

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

Answer 2

编辑：调整了对新细节的回答。

http://jsfiddle.net/gq8s4/3/

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

Answer 3

Flexbox与您将获得的距离非常接近。

http://tinker.io/eb980

#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 */
}

支持：Firefox，Safari，Chrome，Opera，IE10。 http://caniuse.com/flexbox

如果您愿意添加额外的标记，可以使用display: table-cell伪造它，但它不会是完美的：

http://tinker.io/eb980/2

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

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

3 个答案: