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

Question

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

在my code 4th member of each row get out of alignment comes down to next line.

我想让 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>

标签： htmlcss

Answer 1

使用显示：弹性；

.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>