如何垂直,均匀地传播动态div？

Question

基本上,我希望子div在父div中均匀分布,如果其中一个子div被删除,其余的应该调整大小并再次均匀地填充剩余空间.

例如:

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------   

现在当删除子div时,它应该成为

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------   

现在,我想用纯html/css做这个,但目前我找不到解决方案.

我正在考虑的另外两个选择是:

• 使用javascript计算高度
• 为一堆场景创建不同的类(例如:父有2个子div,3个子div,4个子div等)然后用php加载它们

谁有更好的主意？

Answer 1

使用CSS表格有table-layout: fixed-无JavaScript是必要的.

小提琴

要查看此工作,请单击上面小提琴的一个li元素上的'inspect element',然后右键单击'delete node'和walla! - 正是你需要的.

标记

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

Answer 2

如果有人愿意使用CSS3，那么flexbox布局也是一个很好的解决方案！

.parent{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.child{
  width:100%;
  height:100%;
}

更新了 JSFiddle 链接