使元素自动适合父级w / o tables / javascript的宽度

Question

是否可以创建一个包含多个框的div，这些框自动适合父级的大小（均匀分布）而不使用表或Javascript？我意识到table-layout:fixed;可以实现这一点，但我试图对其进行动画处理，但似乎效果不佳。以下图片是我的意思的一个例子：

我正在尝试增加div中一个框的宽度，然后将其余的框自动调整大小，以便所有框均匀地适合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

如果您想要通过点击/触摸动画框，那么您将需要Javascript。

如果您希望框仅在翻转时设置动画，则可以将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/