29

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

前任：

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

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

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

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

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

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

有人有更好的主意吗？

4

4 回答 4

20

使用css 表table-layout: fixed- 不需要 javascript 。

小提琴

要查看此工作，请单击上述小提琴的 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;
}
于 2013-10-16T06:01:33.273 回答
4

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

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

更新了 JSFiddle 链接

于 2016-10-24T16:12:13.093 回答
2

我用过display:table和display:table-row属性。

这是小提琴。

于 2013-10-16T06:12:43.497 回答
0

弹性盒（耶）

假设你有一堆，items他们住在parentContainer. 如果parentContainer生活在另一个容器中（grandParentContainer？），您需要确保它parentContainer占据了它可以占据的全部尺寸（年轻玩家的陷阱）。

所以可以说grandParentContainer是占据了整个窗口。然后我们应该parentContainer像这样给出css样式：

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

有关其他选项，请参阅Internet 上最好的 flexbox 指南。justify-content

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

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

.item {
  margin: 1rem;
}
于 2020-05-02T06:12:55.977 回答