10

テーブルや Javascript を使用せずに、親のサイズに自動的に収まる (均等に分散された) 複数のボックスを含む div を作成することは可能ですか? それが可能であることはわかっていますがtable-layout:fixed;、それをアニメーション化しようとしましたが、うまく機能していないようです。次の図は、私が言いたいことの例です。

ボックスの自動サイズ変更を示す gif

div 内の 1 つのボックスの幅を広げようとしています。これにより、残りのボックスのサイズが自動的に調整され、すべてのボックスが div に均等に収まるようになります。インスタントだけでなく、アニメーション化する必要がある場合は、テーブルを使用します。また、Javascript を使用して でアニメーション化して実験しました -webkit-transitionが、うまくアニメーション化できませんでした。サイズを拡大/縮小する代わりに、ボックスは幅が 0px で始まり、指定されたサイズに伸びるように見えました。(これは でテーブルを使用していましたtable-layout:fixed。これを行う純粋な CSS/HTML の方法はありますか、それとも Javascript やテーブルを使用する必要がありますか?

4

3 に答える 3

4

固定数の子を使用すると、テーブルがなくても可能です（ただし、テーブルの表示が必要です）。使用した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

于 2013-02-28T16:51:03.170 に答える
0

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/

于 2013-02-28T17:01:11.387 に答える
0

クリック/タッチでボックスをアニメーション化する場合は、Javascriptが必要です。

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

ただし、このソリューションは、固定数のボックスに対してのみ機能します。

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

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

于 2013-02-28T16:37:26.100 に答える