仅使用CSS将元素列表显示为表格?

时间:2019-01-20 14:54:55

标签: css css3 flexbox

将列表显示为具有3列的表格,各项目均匀散布,并且各边和各行之间的Select itemid , count(*) from purchase_data a INNER JOIN ( Select userid from purchase_data where itemid=1 ) T on t.userid = a,userid where itemid != 1 group by itemid having count(itemid)>=1 边距。

10px

应呈现为

enter image description here

可以使用.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> 版面来实现,但是它需要更复杂的HTML,请参见下面的示例。

flex
.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;  }

我想知道是否可以在不添加任何其他HTML元素的情况下使用纯CSS。 <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>的大小不应更改,并且未知。

2 个答案:

答案 0 :(得分:3)

您可以使用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>

答案 1 :(得分:2)

Temani Afif写了一个很好的答案。弹性盒仅适用于2至3行,而网格版则适用于更多项目。

使用space-between可以进一步简化网格CSS,从而消除了边距和n-th child选择器。

.item {
   width: 10px;
   height: 10px;
   background: black;
}
   
.row {
   display: grid;
   grid-template-columns: repeat(3,10px); /*change this*/
   grid-gap: 10px;
   padding:10px;
   background: #eee;
   justify-content: space-between;  /*add this*/
 }
  
<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>