css - 仅使用 CSS 将元素列表显示为表格?
问题描述
将列表显示为具有 3 列的表格,项目均匀分布,并且10px
每个边和行之间都有边距。
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
应该呈现为
可以通过布局来实现flex
,但它需要更复杂的 HTML,请参见下面的示例。
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }
<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
我想知道是否可以在不添加任何额外 HTML 元素的情况下使用纯 CSS。的大小.items
不应该改变,它是未知的。
解决方案
您可以通过在第一行和最后一行之间添加一个隐藏元素来使用 flexbox 执行此操作,width:100%
这样您就可以避免更改 html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如果元素数量未知,您可以考虑 CSS 网格:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
推荐阅读
- c# - Reportviewer,一些报告打印,而另一些则不会
- c# - 与 DTC 的交易未锁定其读取
- python - 如何在熊猫中获取相应股票的价格
- apache-kafka - Kafka - 如何重置处理消息的最大尝试次数?
- python-3.x - PyDev、Eclipse 和 Python 3 - 禁用 __module_not_in_the_pythonpath__ 完成
- python - Python中可变数据的重复数据删除/合并
- django - 如何为 django 类视图获取方法提供上下文
- python - 使用足够的数据集找到两个变量之间的数学关系
- wordpress - 使用 authorize.net 进行自动付款
- python - 我怎样才能成功地使用装饰器功能来解决我的问题?