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

概述基本上，我想让孩子的divs在父div中平均分配，如果其中一个子div被删除，其余的应该调整大小并再次均匀填满剩余的空间。 例如： ---parent---------------| -------------------- || | child | || -------------------- || -------------------- || 基本上，我想让孩子的divs在父div中平均分配，如果其中一个子div被删除，其余的应该调整大小并再次均匀填满剩余的空间。

例如：

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

现在当一个小孩div被删除时，它应该成为

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

现在，我只想用纯粹的HTML / CSS来做，但是目前我找不到解决方案。

我正在考虑的另外两种方法是：

>使用JavaScript计算高度
>为一堆场景创建不同的类(例如：
2个小孩，3个小孩，4个小孩等等)，然后加载它们
因此与PHP

任何人有更好的主意？

解决方法 使用 css tables与桌布：固定 – 不需要JavaScript。

FIDDLE

要查看这个工作单击“检查元素”上面的小提琴的一个li元素，然后右键单击“删除节点”和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;}

总结

以上是内存溢出为你收集整理的html – 如何垂直传播动态div,均匀？全部内容，希望文章能够帮你解决html – 如何垂直传播动态div,均匀？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。