How to put all the div squares on the same line?-CodePudding

I am trying to lay down all these square divs horizontally but when I set display:inline-block on the parent div, everything shrinks down and collapses into a pellet. If I use flex, I feel like I need to tweak flex property to my need. Is there a simple way to fix it?(I want them to always occupy two lines evenly with the gap in between in response to the changing viewport width)

.square {
  position: relative;
  margin: 0;
  max-width: 60px;
  border: 1px dotted black;
  border-radius: 4px;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div >
    <div >
      <div >1</div>
    </div>
    <div >
      <div >2</div>
    </div>
    <div >
      <div >3</div>
    </div>
    <div >
      <div >4</div>
    </div>
    <div >
      <div >5</div>
    </div>
    <div >
      <div >6</div>
    </div>
    <div >
      <div >7</div>
    </div>
    <div >
      <div >8</div>
    </div>
    <div >
      <div >9</div>
    </div>
    <div >
      <div >10</div>
    </div>
    <div >
      <div >11</div>
    </div>
    <div >
      <div >12</div>
    </div>
  </div>

CodePudding user response：

.square {
width:10vw;
max-width:60px;
  
  
  margin-bottom:3vw;
  border: 1px dotted black;
  border-radius: 4px;
  
}
.number-of-round{
display:flex;
justify-content: space-between;}

<div >
    <div >
      <div >1</div>
    </div>
    <div >
      <div >2</div>
    </div>
    <div >
      <div >3</div>
    </div>
    <div >
      <div >4</div>
    </div>
    <div >
      <div >5</div>
    </div>
    <div >
      <div >6</div>
    </div>
  </div>
  <div >
    <div >
      <div >7</div>
    </div>
    <div >
      <div >8</div>
    </div>
    <div >
      <div >9</div>
    </div>
    <div >
      <div >10</div>
    </div>
    <div >
      <div >11</div>
    </div>
    <div >
      <div >12</div>
    </div>
  </div>

CodePudding user response：

You just need to add the property display: inline-block; in the class square.

.square {
  display: inline-block;
  position: relative;
  margin: 0;
  max-width: 60px;
  border: 1px dotted black;
  border-radius: 4px;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div >
    <div >
      <div >1</div>
    </div>
    <div >
      <div >2</div>
    </div>
    <div >
      <div >3</div>
    </div>
    <div >
      <div >4</div>
    </div>
    <div >
      <div >5</div>
    </div>
    <div >
      <div >6</div>
    </div>
    <div >
      <div >7</div>
    </div>
    <div >
      <div >8</div>
    </div>
    <div >
      <div >9</div>
    </div>
    <div >
      <div >10</div>
    </div>
    <div >
      <div >11</div>
    </div>
    <div >
      <div >12</div>
    </div>
  </div>