水平分佈目前存在的元素DIV中使用CSS

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

支持：火狐，Safari，Chrome瀏覽器，歌劇，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>