将列表显示为具有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
应呈现为
可以使用.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>
的大小不应更改,并且未知。
答案 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>