如何根据 html/css/bootstrap 中的子级数量制作父级 div？答案

【问题标题】：How can I make parent div scale, based on number of children in html/css/bootstrap?如何根据 html/css/bootstrap 中的子级数量制作父级 div？
【发布时间】：2017-01-23 06:00:46
【问题描述】：

不幸的是，这个问题太长了，无法在谷歌或这里给我正确的结果，我得到的只是一些 svg 元素的缩放。

我想做的是做网上商店，其中 parent 包含 div 框的结果，并且 parent 的大小应该与孩子的数量有关。

假设我有 14 个子 div，每行 4 个，我可以使用起始最小高度：768 px，但如果有 200 个子，我需要将容器和容器父级的高度增加 ( 200/4-4)*128px，因为 4 行是基本屏幕，其他 46 行不适合。我如何根据屏幕分辨率动态地做到这一点？

编辑：我尝试添加一些细节： IMG of my current status 我想做的 atm 是增加浅灰色框的大小，它的父级（白色框）和它的父级（几乎透明的框）如果有太多红色框，则离开第一个容器的边界（浅灰色框）

【问题讨论】：

一个普通的块元素会默认增加高度。您需要提供更多信息才能得到答案。
我向其父级添加了块，但该父级的父级的大小没有增加，我该怎么办？
所以您希望父级的大小根据最高列中的子级数进行缩放？孩子的大小是默认的，通常被认为更合适。不太确定您要做什么（或为什么）。
我真的很抱歉我的问题质量不好，我会尝试更好地形成它：我有默认高度为 1000px 的父级。在人们搜索某些东西并且许多结果与搜索匹配之前，它会保持那么大，而不是我想让父母更大。我不想根据最高列中的孩子数量来缩放父母，我只想通过孩子的总数来缩放它，同时在父母内部也有很大的填充，这样孩子就不会碰到父母的角落，真的很抱歉，如果我遗漏了一些基本的东西，我就是找不到解决方案。
我相信min-height 是您所需要的，就像min-height: 1000px。没有minimal reproducible example 就很难判断。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您不应该将静态高度属性放在节点的父级的父级。

    overflow: scroll;

据我所知应该可以工作。

【讨论】：

嘿，谢谢，忘记这个我真的很愚蠢，它在电脑上确实做得很好。我的主要抱怨是它有点让它在移动设备上搞砸了。另外，与这个问题无关，只是为了美观，当我添加滚动时，它还添加了水平滚动箭头，即使它永远不会比预期更宽，也不需要向左/向右滚动，如果可能的话，我该如何删除它.
使 padding 和 boxsize 不超过所使用设备的 view-port-max 宽度。这更像是尝试你的价值，它会起作用。对于这个问题，使用引导程序更容易。可能需要重置所有内容以清除元素上的默认浏览器行为，使其超出必要范围

【解决方案2】：

也许你需要js解决方案http://masonry.desandro.com/

有时候我会用这个

【讨论】：

我觉得需要一些时间来学习，我有点赶时间，抱歉，也许是下一个项目。

【解决方案3】：

解决了，以防有人像我一样试图在对象内部制作一些复杂的对象，但在定位和缩放它们时遇到问题，也许你做了像我一样的事情。

在容器内部，我通过以下方式将每个对象定位在中间：位置：绝对；变换：translateX（-50%）；我确实喜欢这样的 10 个对象，绝对位置导致我的孩子 div 离开而不是增加它的大小，我应该做的只是添加容器 5% 的填充，因为所有孩子的宽度都是 90%，并且不要为容器的孩子设置位置，只需使用填充和边距来操作它们。

【讨论】：