10

是否可以在不使用表格或 Javascript 的情况下创建一个包含多个框的 div，这些框自动适合父级的大小（均匀分布）？我意识到这是可能的，table-layout:fixed;但我试图为它制作动画，但它似乎效果不佳。下图是我的意思的一个例子：

显示自动调整框的 gif

我正在尝试增加 div 内一个框的宽度，然后将其余框自动调整大小，以便所有框均匀地放入 div。我需要它是动画的，而不仅仅是即时的，在这种情况下我只会使用一张桌子。我还使用 Javascript 对其进行了实验，用 a 对其进行了动画处理， -webkit-transition但这并没有很好地进行动画处理。盒子没有扩大/缩小尺寸，而是从 0px 的宽度开始，然后拉伸到给定的尺寸。（这是使用带有table-layout:fixed.

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

如果您希望这些框在单击/触摸时产生动画，那么您将需要 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 回答
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 回答