在我的 ng-repeat 中,CSS 中是否有一种方法可以在 X 个结果后换行?
见下面的代码。
CSS:
.orders-container {
height: auto;
width: auto;
margin-top: -5px;
border: 1px solid black;
position: relative;
background-color: ghostwhite;
}
HTML:
<div class="orders-container">
<ul>
<span class="order-title">Orders</span>
<li ng-repeat="num in nums track by $index">
<span class="part-title">{{ nums }}</span>
</li>
</ul>
</div>
当前的 UI 显示 - 这个列表很容易是这个长度的 10 或 20 倍。所以我想在这么多结果之后换成一个新的专栏。
Orders
6432508
6432512
6432513
6432511
6432509
UI显示 future :
Orders
6432508 6432515
6432512 6432516
6432513 6432517
6432511 6432518
6432509 6432519
最佳答案
你可以用 css 做到这一点 flexbox模态。
.orders-container {
margin-bottom: 20px;
}
.orders-container ul {
flex-direction: column;
max-height: 120px;
background: black;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 5px;
color: white;
padding: 0;
margin: 0;
}
<div class="orders-container">
<span class="order-title">Orders</span>
<ul>
<li><span class="part-title">6432508</span></li>
<li><span class="part-title">6432509</span></li>
<li><span class="part-title">6432510</span></li>
<li><span class="part-title">6432511</span></li>
<li><span class="part-title">6432512</span></li>
</ul>
</div>
<div class="orders-container">
<span class="order-title">Orders</span>
<ul>
<li><span class="part-title">6432508</span></li>
<li><span class="part-title">6432509</span></li>
<li><span class="part-title">6432510</span></li>
<li><span class="part-title">6432511</span></li>
<li><span class="part-title">6432512</span></li>
<li><span class="part-title">6432513</span></li>
<li><span class="part-title">6432514</span></li>
<li><span class="part-title">6432515</span></li>
<li><span class="part-title">6432516</span></li>
</ul>
</div>
关于javascript - 在 X 个结果后包装数据的 CSS 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39772068/