个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个按列放置的动态元素列表(包含文本)，我需要在每 5th 元素之后打破它。
我只有两个约束:
100px - 如果文本溢出，它必须换行到下一行。5 个元素。元素的数量不是未知的。如果列表中的元素少于 5 个，则可以将它们保留在同一列中。如果有更多，则它们必须换行到下一列。 
因为我不知道元素的数量或它们的内容 - 我无法为父 list 容器设置 height 属性。
那么我如何强制父容器在每 5th 项进入下一列后中断。
.list {
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
border: 1px solid red;
width: 100px;
overflow-wrap: anywhere;
}
.item:nth-child(5n) {
border: 1px solid blue;
}<body>
<div class="list">
<div class="item">Text 1</div>
<div class="item">Text 2</div>
<div class="item">Long Text 3 must wrap to next line</div>
<div class="item">Text 4</div>
<div class="item">Text 5</div>
<div class="item">Text 6</div>
<div class="item">Text 7 is also long</div>
<div class="item">Text 8</div>
<div class="item">Text 9</div>
<div class="item">Text 10</div>
<div class="item">Text 11</div>
<div class="item">Text 12 is last item</div>
</div>
</body>最佳答案
这是一个使用列的想法。有点 hacky，因为它需要设置一个很大的高度。
.list {
column-width:100px;
column-fill:auto;
column-gap:0;
height: 100vh;
}
.item {
border: 1px solid red;
}
.item:nth-child(5n) {
border: 1px solid blue;
margin-bottom: 100vh; /* to create the break */
}
body {
margin:0;
}<body>
<div class="list">
<div class="item">Text 1</div>
<div class="item">Text 2</div>
<div class="item">Long Text 3 must wrap to next line</div>
<div class="item">Text 4</div>
<div class="item">Text 5</div>
<div class="item">Text 6</div>
<div class="item">Text 7 is also long</div>
<div class="item">Text 8</div>
<div class="item">Text 9</div>
<div class="item">Text 10</div>
<div class="item">Text 11</div>
<div class="item">Text 12 is last item</div>
</div>
</body>关于html - 如何动态打破 FlexBox 列以开始新列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64801733/
27
4
0
这是主函数，其中还调用了 9 个函数。我将向您展示另一个函数，以便您了解我的目标是什么。 int main() { char B[rows][columns]; char answer
每当我使用 preventDefault() 时，我通常将它放在事件处理程序的顶部，如下所示: $('#foo').on('click', function(e){ e.preventDefaul
我想要实现的是用户输入一个值，然后输入一个测量值。然后将其放置为最小、最大或介于两者之间。保留输入了多少个值的计数。以及以米为单位的所有值的总和。 程序最初可以运行，但是当我输入换行符时，程序会重复同
我无法打破 while 循环。 "; $quizslots = mysql_query("SELECT * FROM quiz_slots WHERE `quizid`=$quizsectio
所以我将一个模板化的二叉树字典实现为一个继承自抽象字典类的类，我的添加函数有一个我无法弄清楚的问题。 基本上，我的树的节点具有键和值，以及指向其父节点、左子节点和右子节点的指针。节点的代码是 stru
我的代码应该在内容之间放置一个横幅，但它正在循环播放横幅。我需要它只显示一个横幅。我试过使用 return false;，就像这个例子一样，但它没有用: $(".newsitem_text").con
我有一个 Storyboard指定用于登录我的应用程序。我将其嵌入到 UINavigationController 中。登录到我的应用程序(并过渡到新的 Storyboard)后，我想“脱离”这个导航
我想知道是否可以在不使用 MCU 复位引脚上的外部复位按钮的情况下中断 while 循环并从特定位置重新启动代码。 下面是当“if”语句为真时我想中断的 while 循环，我正在使用 LCD，并想返回
所以我有这个问题，如果数组中的值高于输入值，它应该做一些事情然后停止循环并且不要触及数组中的剩余值。这是到目前为止的代码: const percentages = []; let enteredVal
我想在“div2”中打断长字，div2 和 div3 的宽度都不能大于父宽度(即 150px)。唯一有效的是 word-break: break-all 但这也会打断短词。 #div1{ di
我的数据库中有 3 个表。 PARENT_A 有一个“ID”主键列。 PARENT_B 有一个“ID”主键列。 CHILD 具有“PARENT_A_ID”和“PARENT_B_ID”外键列。它还有一个
在这个非常人为的示例中，我有一个包含 3 个元素的数组，我使用 .each() 对其进行循环。方法。 var vals = $w('foo bar baz'); vals.each( function
非常简单的示例代码(仅用于演示，没有任何用处): repeat { while (1 > 0) { for (i in seq(1, 100)) { break # usual
我有以下 promise : var aggregatePromise = () => { return new Promise((resolve, reject) => { Ei
我想检测表单的“输入”键而不让表单被提交。我如何打破这种关联？ document.forms[0].onkeypress = function (event) { e = window.eve
这里是新手。我有一个 Ajax 函数，可以循环 3 个不同的请求。但是，如果第一个请求失败，我希望其他请求终止。我尝试放入“break”语句，但收到“非法的break语句”错误，我猜测是因为它不是直接
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数，步长为 5，但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
我想知道如何正确地打破 JS 中的 promise 链。 在这段代码中，我首先连接到数据库，然后检查集合是否已经有一些数据，如果没有则添加它们。不要关注一些 actionhero.js 代码..这里并
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数，步长为 5，但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
您可以使用 CompletableFuture 链接运行 block ，如下所示: CompletableFuture .supplyAsync(block1) .thenApply(
我是一名优秀的程序员,十分优秀！