【问题标题】：How to spread dynamic divs vertically, evenly?如何垂直、均匀地分布动态 div？
【发布时间】：2020-05-02 14:12:55
【问题描述】：

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

例如：

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

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

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

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

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

使用 javascript 计算高度
为一堆场景创建不同的类（例如：具有 2 个子 div、3 个子 div、4 个子 div 等）然后加载它们相应地使用 php

谁有更好的主意？

【问题讨论】：

你用什么工具来创建 ASCII 图表？
没有工具，只有键盘，我自己设计的:))
为 ascii 艺术给你一个 +1 ！

标签： html css

【解决方案1】：

使用 css tables 和 table-layout: fixed - 不需要 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;
}

【讨论】：

这很酷很简单，谢谢你帮助我。但显然我需要去阅读显示标签规格，因为我完全错过了这个
@RaulGlogovetan，很高兴它有帮助。我还添加了指向 css 表的 w3c 文档的链接
不幸的是，这仅适用于每行的内容高度相同的情况。如果一行上的文本换行而其他行不换行，那么换行的文本最终会更高。本质上，只有垂直填充在每一行上是相同的。这是小提琴演示：jsfiddle.net/7zfdhftt

【解决方案2】：

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

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

Updated JSFiddle Link

【讨论】：

【解决方案3】：

我使用了display:table 和display:table-row 属性。

Here is the fiddle.

【讨论】：

【解决方案4】：

弹性盒（耶）

假设你有一堆items，他们住在parentContainer。如果 parentContainer 存在于另一个容器 (grandParentContainer?) 中，您需要确保 parentContainer 占据最大尺寸（对年轻玩家的陷阱）。

假设grandParentContainer 占据了整个窗口。那么我们应该给parentContainer这样的css样式：

.parentContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

有关其他 justify-content 选项，请参阅 best flexbox guide on the internet。

然后高度和宽度占据超级容器的 100% (grandParentContainer)。我们将容器描述为一个 flexbox，并给出方向列，以便它垂直堆叠其子项。

然后也许给孩子们一个1rem 或其他的边距，这样看起来就不错了。

.item {
  margin: 1rem;
}

【讨论】：