每行的第4个成员在css中的网格中不对齐

Question

我有16个框，其中我有4个框组合在一起。

在CCD_ 1中。

我想让4组出现在一行中。。没有最后一个元素而没有下降

如何纠正这一点，并使4组人保持在一条线上。

如何纠正这一点，并使4组人保持在一条线上。

如何纠正这一点，并使4组保持在一行中

.box {
width: calc(33.3% - 9px);
border-radius: 5px;
border:2px solid white;


margin: -2px;
background-color: #666666;
height: 10vh;
display: inline-flex;
align-items: center;
justify-content: center;

background-repeat:no-repeat;
background-size: cover;
cursor:pointer;
}
#container {
white-space:nowrap;
	border:px solid #CC0000;
	
}
.containerr{
	border:px solid #FF3399;
	} 
.pic{
	background-size: 100% 100%;
	}	
	
.container2 {
width: 29.0vw;
position: fixed;
top: 0.9vh;
left: 19.2vw;
}
.box p {
font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:15px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
color: #005ce6;
text-align: center;
}

<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">

<div class="box"  id="1"><p name="values">1</p></div>
<div class="box"  id="2"><p name="values">2</p></div>
<div class="box"  id="3"><p name="values">3</p></div>
<div class="box"  id="4"><p name="values">4</p></div>
</div>
<div id="2container">

<div class="box"  id="5"><p name="values">5</p></div>
<div class="box"  id="6"><p name="values">6</p></div>
<div class="box"  id="7"><p name="values">7</p></div>
<div class="box"  id="8"><p name="values">8</p></div>
</div>
<div id="3container">

<div class="box"  id="9"><p name="values">9</p></div>
<div class="box"  id="10"><p name="values">10</p></div>
<div class="box"  id="11"><p name="values">11</p></div>
<div class="box"  id="12"><p name="values">12</p></div>
</div>
<div id="4container">

<div class="box"  id="13"><p name="values">13</p></div>
<div class="box"  id="14"><p name="values">14</p></div>
<div class="box"  id="15"><p name="values">15</p></div>
<div class="box"  id="16"><p name="values">16</p></div>
</div>

</div>
</div>
</div>

Answer 1

使用display：flex；

.container{
display: flex;
white-space:nowrap;
	border:1px solid #CC0000;
}
.box {
width: calc(33.3% - 9px);
border-radius: 5px;
border:2px solid white;


margin: -2px;
background-color: #666666;
height: auto;

align-items: center;
justify-content: center;

background-repeat:no-repeat;
background-size: cover;
cursor:pointer;
}
.pic{
	background-size: 100% 100%;
	}	
	
.container2 {
width: 29.0vw;
position: fixed;
top: 0.9vh;
left: 19.2vw;
}
.box p {
font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:15px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
color: #005ce6;
text-align: center;
}

<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div class="container">

<div class="box"  id="1"><p name="values">1</p></div>
<div class="box"  id="2"><p name="values">2</p></div>
<div class="box"  id="3"><p name="values">3</p></div>
<div class="box"  id="4"><p name="values">4</p></div>
</div>
<div class="container">

<div class="box"  id="5"><p name="values">5</p></div>
<div class="box"  id="6"><p name="values">6</p></div>
<div class="box"  id="7"><p name="values">7</p></div>
<div class="box"  id="8"><p name="values">8</p></div>
</div>
<div class="container">

<div class="box"  id="9"><p name="values">9</p></div>
<div class="box"  id="10"><p name="values">10</p></div>
<div class="box"  id="11"><p name="values">11</p></div>
<div class="box"  id="12"><p name="values">12</p></div>
</div>
<div class="container">

<div class="box"  id="13"><p name="values">13</p></div>
<div class="box"  id="14"><p name="values">14</p></div>
<div class="box"  id="15"><p name="values">15</p></div>
<div class="box"  id="16"><p name="values">16</p></div>
</div>

</div>
</div>
</div>