如何垂直，均匀地传播动态div？ [英] How to spread dynamic divs vertically, evenly?

问题描述

基本上，我想让孩子divs均匀地分布在父div，如果，其中一个孩子divs被删除，其余的应调整大小，并再次均匀填充剩余的空间。

Basically, i want the child divs to spread out evenly in the parent div, and if, one of the child divs is removed, the rest should resize and to fill the remaining space evenly again.

例如：

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

现在当一个子div被移除时，它应该成为

now when a child div is remove, it should become

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

现在，我想只用纯html / css做这个，但是目前我找不到一个解决方案。

Now, i want to do this with only pure html/css, but at the moment i can't find a solution.

我考虑的其他选择是：

• 使用javascript计算高度


• 创建不同的类一组场景（例如：父元素
  2个子div，3个子div，4个子div等），然后使用php

加载

• calculate the heights using javascript
• create different classes for a bunch of scenarios (eg: a parent with 2 child divs, 3 child divs, 4 child divs, etc) and then load them accordingly with php

任何人都有更好的主意？

Anyone got a better idea ?

推荐答案

使用 css表 与 table-layout：fixed - 不需要JavaScript。

Use css tables with table-layout: fixed - no javascript is necessary.

FIDDLE

FIDDLE

要查看此工作，请在上述小提琴的一个li元素上点击检查元素，然后右键单击删除节点'和walla！

To see this working click 'inspect element' on one of the li elements of the above fiddle, then right-click 'delete node' and walla! - exactly what you need.

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

CSS

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;
}

这篇关于如何垂直，均匀地传播动态div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！