Gli elementi si adattano automaticamente alla larghezza del padre senza tabelle/javascript

Question

È possibile creare un div contenente più caselle che si adattano automaticamente alla dimensione del genitore (distribuito uniformemente) senza l'uso di una tabella o Javascript? Mi rendo conto che è possibile con table-layout:fixed; ma ho cercato di animarlo e non sembra funzionare molto bene. L'immagine seguente è un esempio di quello che voglio dire:

Sto cercando di aumentare la larghezza di una scatola all'interno del div che poi caso il resto delle caselle dimensioni per automaticamente in modo tutte le caselle adattarsi uniformemente al div. Ho bisogno che sia animato, non solo istantaneo, nel qual caso userò solo un tavolo. L'ho anche sperimentato usando Javascript, animandolo con uno -webkit-transition ma questo non si è rivelato per animare molto bene. Invece di espandere/diminuire le dimensioni, la scatola sembrava iniziare con la larghezza a 0 px, quindi allungare alla dimensione assegnata. (Questo è stato utilizzando un tavolo con table-layout:fixed. C'è un modo puro CSS/HTML per fare questo, o lo fa richiede l'utilizzo di Javascript e/o un tavolo?

Answer 1

utilizzo di un numero fisso di bambini è possibile, senza tabelle (anche se è necessario display da tavolo), qui è la CSS che ho usato:

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

è necessario calcolare manualmente le percentuali per i migliori risultati nell'animazione . Demo:

http://jsbin.com/ubucod/1

Answer 2

Se si desidera che le scatole per animare su una clicca/tocca quindi avrai bisogno di Javascript

Se vuoi che le caselle si animino solo sul rollover, puoi applicare css all'elemento genitore per impostare tutte le caselle alla stessa percentuale per impostazione predefinita e cambiarle sul rollover.

Questa soluzione funziona solo per un numero fisso di caselle.

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

Non l'ho provato ma lo dovrebbe funzionare.

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/