27
4
I want a container class that will arrange children from left to right and from top to bottom.
我想要一个容器类，将从左到右，从上到下安排孩子。
I don't want my container to spill outside of the parent's inner box.
我不想让我的容器洒到父母的内盒外面。
If children take up more space than that I want a vertical scroll bar so that I can see all the children if I want to.
如果孩子占据的空间比这个多，我想要一个垂直滚动条，这样我就可以看到所有的孩子，如果我想的话。
I defined .wrap-container like so:
我按如下方式定义了.work-tainer：
个人中心
文章发布
退出.wrap-container {
display: flex;
flex-wrap: wrap;
align-content: center; // vertically
align-items: flex-start; // horizontally
// justify-content: space-between; /* Space items evenly along the main axis */
padding: 15px;
gap: 15px;
margin: 0px;
border: solid blue 1px;
// height: calc(100% - 30px);
// width: calc(100% - 30px);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
overflow: auto;
}
It arranges them correctly, but it does not handle the overflow as it should. I can never see the top of the first row of children.
它正确地排列了它们，但没有按其应该的方式处理溢出。我永远看不到第一排孩子的顶端。
To clarify, I know display: flex is allowed to spill outside of the parent, hence
为了澄清，我知道DISPLAY：Flex被允许溢出到父级之外，因此
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
The 30px is to account for the parent's padding.
Which, by the way, seems like a bug as well - you would think that specifying max-height: 100% should do it, but no, you need to know how the parent is defined, which seems wrong.
30px将考虑到父母的填充。顺便说一句，这似乎也是一个错误--您可能认为指定max-Height：100%就可以做到这一点，但是不，您需要知道父对象是如何定义的，这似乎是错误的。
But in any case, even if I arrange .wrap-container to not spill outside of its parent, it still does not handle the children correctly.
Please see what I mean here:
https://stackblitz.com/edit/stackblitz-starters-gwqxpg?file=src%2Fapp%2Fapp.component.scss
但是在任何情况下，即使我安排.print-tainer不溢出它的父容器，它仍然不能正确地处理子容器。请明白我在这里的意思：https://stackblitz.com/edit/stackblitz-starters-gwqxpg?file=src%2Fapp%2Fapp.component.scss
The parent of .wrap-container is defined like so:
.work-tainer的父级定义如下：
.parent {
display: block;
width: 500px;
height: 200px;
border: solid red 1px;
padding: 15px;
gap: 15px;
margin: 70px;
}
and children of .wrap-container like so:
而.work-tainer的子容器如下所示：
.child {
border: 1px solid transparent;
border-image-slice: 1;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
padding: 5px;
width: 150px;
height: 100px;
}
It then looks like this:
然后它看起来是这样的：
Even scrolled all the way up you can't see "It's working 1" or "It's working 2".
即使一直向上滚动，你也看不到“It‘s Working 1”或“It’re Working 2”。
Just for your information: // is not a valid way to do comments in CSS. This will lead to problems.
仅供参考：//不是在css中进行注释的有效方式。这将导致问题。
You should remove the 'align-content: center;' from '.wrap-container'
Setting 'align-content: start' will also work.
您应该从“.print-tainer”中删除“Align-Content：Center；”设置“Align-Content：Start”也可以。
Thank you. Do you know why? According to this: developer.mozilla.org/en-US/docs/Web/CSS/align-content it should have helped but it broke it???
谢谢。你知道为什么吗？根据developer.mozilla.org/en-US/docs/Web/CSS/align-content的说法：它本应该帮助你，但它却打破了它？
I'm also learning myself so not sure, but since the container has the 'max-height' value and 'align-content' it must be displaying the content in the center. I'm sure it would also work if you set the 'align-content' to 'start'.
我也在学习自己，所以不确定，但因为容器有‘max-Height’和‘Align-Content’的值，所以它一定是在中间显示内容。我确信，如果您将“Align-Content”设置为“Start”，它也会起作用。
27
4
0
假设我想在存储在变量中的特定表中导航。 我想在表的 thead 中找到 tr 中的所有输入。 如果我有表的 ID，我会这样做 - $('#mytable thead tr input') 但是假设我已
我是 React 新手，我正在尝试了解一般语法的工作原理，但不确定在这里提问是否合适。以下是我的一个简单标题组件的代码。 export default class Title extends Comp
我正在尝试实现在树结构中获取 child 的 child 的可能性。 这是我想要的例子。 到目前为止我做了什么。 class Children(list): def __init__(self
我一直在尝试让它工作一段时间，但不确定如何执行以下操作。我的表单组件有包含常规 html 标记和输入的子组件。如果 child 是输入，我想添加 attachToForm 和 detachFromFo
在本文档中 https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns 他们使用 children : 但是在 An
即使我只向表中添加一项内容，我似乎也无法弄清楚为什么会显示重复的子项添加错误。 有 3 个主要类: WindowTease:加载舞台并调用 loadTable() 方法 InventoryContro
我一直在查看以前提出的问题，但似乎找不到适合我的情况的解决方案... 我希望能够循环遍历所有 child 和 child 的 child 等等...... 设计中的标记看起来与此类似
这个问题在这里已经有了答案: How can I use jQuery methods on elements accessed by brackets notation? (2 个答案) 关闭 5
我有一个场景，我知道我正在寻找的 div 恰好是两层深。 使用效率是否更高: $('#mydiv').find('.myselector') 或 $('#mydiv').children().chil
我今天有一个很奇怪的问题:我有一个水平显示一些缩略图的 RecyclerView，我使用 smoothScrollToPosition 导航到我需要的项目，但我注意到一个问题:它不会滚动到最后一项。进
只有 JS，没有 Jquery。 如何获取容器的所有子节点，然后为每个子节点获取子节点？ 我不想将 ID 添加到作为网格行子级的每个包装器，我尝试使用“this”或此索引进行定位。该脚本应该是动态的，
任务:在“注释”类的任何段落内的有序列表中强调强调的文本。这是我目前所拥有的... .note>p>ol>em{text-decoration:underline;} 我正在努力让它继续下去。我的代码
我有两个类如下: --- CSS: .shw-intro { width: 250px; height: 150px; background: rgb(95, 190, 0);
当前的 Firebase 数据库结构: 我要实现的目标: 在我所有位置的任何“促销”子项中搜索等于某物的优惠券。 如果找到，将其“limit”参数减少 -1 来更新它 我当前的代码: mDat
我有一个 html 表，想要获取所有行。但是，在 DebugElement 或 NativeElement 上调用 .children 会返回不同的顺序。 我的 table : 1
我在使用 Element.children 时注意到一个奇怪的问题并且似乎没有找到好的解决方法。 示例 1(预期行为) 拿这个 HTML: 还有这个 JS const formElem
目标是选择任何后代 - 无论直系后代指示如何 - 但不选择他们的 child 。换句话说，如果我从文档中搜索，我希望找到目标选择器未包含的所有子元素: test t
当我尝试执行 ParentNode.children 时，显示无法读取未定义的属性“children”。尝试让父节点的所有子节点的背景颜色为粉红色。 现在，我有一个以半小时为增量的表格，根据上午 8
我不确定这是否可行，但这是我想在 Reactjs 中实现的目标: 所以我想做的是，我想使用 React.cloneElement API 将 Comp1 组件的 pro
更新:我在另一台安装更干净的机器上试过这个。我无法在那台机器上重现这个。如果我发现是什么有问题的 (VSStudio) 组件导致了这种情况，我会告诉你的。 我从后面的代码创建了一些 UIElement
我是一名优秀的程序员,十分优秀！