不使用表格/JavaScript，使元素自动适应父元素宽度

Question

是否有可能创建一个包含多个盒子的div，使这些盒子自适应父容器的大小（均匀分布），而不使用表格或Javascript？我知道可以使用table-layout:fixed;实现，但我尝试过对其进行动画处理，但似乎效果并不好。以下图片是我所指的示例：

我正在尝试增加一个div内部的一个盒子的宽度，这将导致其他盒子自动调整大小，以便所有盒子均匀地适合div。我需要它是动画效果，而不仅仅是瞬间变化，否则我将只使用表格。我也尝试使用Javascript进行实验，并使用-webkit-transition进行动画处理，但这并没有很好地实现动画效果。盒子似乎从0像素的宽度开始，然后拉伸到给定的大小。(这是使用带有table-layout:fixed的表格。是否有纯CSS/HTML的方法来实现这一点，还是它需要使用Javascript和/或表格？

- daviga404

---

+1 非常具有说明性的问题，实际上是一个好问题。 - Andreas Louv

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

- David Hellsing

---

谢谢！这个完美地工作了，非常简单和容易的解决方案。 - daviga404

Answer 2

如果您希望在单击/触摸时使方框动画，则需要使用Javascript。

如果您只想在鼠标悬停时使方框动画，则可以将CSS应用于父元素，以默认设置所有方框的百分比，并在鼠标悬停时更改它们。

但是，请注意，此解决方案仅适用于固定数量的方框。

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

我还没有测试过，但是它应该可以工作。

- Mark Duiker

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/

- João Paulo Macedo