如何讓父母和孩子浮動，同時讓孩子保持同一行？

Question

如何用邊框（父）包裹未知大小的浮動div（子項），同時讓子項保持同一行。

問題是，除非父div被設置爲width: 100%;，否則兒童往往會倒下一個。

更新：雖然張貼代碼，我想通了，看到。

我的代碼有額外的<div>包裝兒童。我要麼刪除它們，要麼將它們設置爲display: inline;。

<div class="body"> 
    <div class="parent"> 
     <div> 
      <div class="child"></div> 
     </div> 
     <div> 
      <div class="child"></div> 
     </div> 
     <div> 
      <div class="child"></div> 
     </div> 
    </div> 
</div>​ 

感謝您的其他精彩提示！

Answer 1

如果您不將孩子div更改爲display: inline或display: inline-block，它們將被垂直堆疊。如果孩子是float ed，他們的大小將不會推動父母的界限。如果您使用display: inline或display: inline-block，只要父母可以足夠寬以適合他們所有人，他們就會拉伸父母。

小提琴：http://jsfiddle.net/MPCsD/1/

Answer 2

我認爲你必須至少設置兒童或父母的寬度固定。也許你可以用java腳本來測量它們。