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

发布时间：2020-12-14 21:41:37 所属栏目：资源来源：网络整理

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!