要素を自動的に親w/oテーブル/ javascriptの幅に合わせる

Question

テーブルやJavascriptを使用せずに、親のサイズに自動的に適合する複数のボックス（均等に分散）を作成することは可能ですか？ table-layout:fixed;で可能だとわかりましたが、私はそれをアニメーション化しようとしましたが、うまく動作していないようです。以下の写真は、私が何を意味するかの例です：

私はその後、箱の残りの部分は箱のようにすべてを自動的にサイズに小文字ますdivの内側に1箱の幅を大きくしようとしていますdivに均等にフィットします。どのような場合でもテーブルを使用するだけではなく、アニメ化する必要があります。私もそれを使って、JavaScriptを使って、-webkit-transitionでアニメーションを試しましたが、これはうまくアニメーション化できませんでした。拡大/縮小する代わりに、ボックスは0pxの幅で始まり、それに与えられたサイズに伸びていたようです。 （これはtable-layout:fixedでテーブルを使用していた。これを行うには、純粋なCSS/HTMLの方法はあります、またはそれはのJavascriptの使用および/またはテーブルを必要とん？

Answer 1

（あなたは、テーブルディスプレイを必要とするが）テーブルなしでそれが可能だ子どもの固定数を使用して、ここで私が使用したCSSは次のとおりです。

.parent{width:400px;height:100px;display:table} 

.parent div{display:table-cell;border:1px solid #000; 
    -webkit-transition:width 1s;width:20%} 

.parent:hover div{width:10%} 
.parent div:hover{width:60%} 

手動アニメーションで最高の結果を得るためにパーセントを計算する必要があります。デモ：

http://jsbin.com/ubucod/1

Answer 2

あなたはボックスが上でアニメーション化する場合

ボックスをロールオーバー時にのみアニメーション化する場合は、親要素にcssを適用して、デフォルトですべてのボックスを同じパーセントに設定し、ロールオーバー時にそれらを変更することができます。

この解決策は固定数のボックスでしか機能しません。

#Container .box{ 
     width: 20%; 
     transition: width 0.2s;    
    } 
    #Container:hover .box{ 
     width: 10%; 
    } 
    .box:hover{ 
     width: 60%; 
    } 

私はそれをテストしていませんが、はになるはずです。

Answer 3

HTML：

<div class="pushercolumn"></div> 
<div class="pushedcolumn"> 
    <div class="unit"></div> 
    <div class="unit"></div> 
    <div class="unit"></div> 
    <div class="unit"></div> 
</div> 

CSS：

.pushercolumn { 
    float: left; 
    width: 30%; /*or whichever you want*/ 
} 

.pushedcolumn { 
    overflow: hidden; /* guarantees the .pushedcolumn is pushed horizontally by the floats */ 
    font-size: 0; /* removes white-space. choose your preferred method*/ 
} 

.unit { 
    display: inline-block; 
    width: 25%; /* assuming there are 4 boxes in the right column. this is the only variable you have to update based on the circumstances */ 
} 

http://jsfiddle.net/joplomacedo/xYAdR/