html - 如何在css中的新行上显示字母

Question

我有四个显示数字的 div，我想显示这些数字下方的文字。我尝试在 css 中使用带有 white-space: pre; 的 p 标签，但它仍然不起作用:

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
}

p {
  white-space: pre;
}

<div id="c">
  <span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text 3</span><span class='cnum'>5 Text 4</span>
</div>

Answer 1

HTML

<div id="c">
   <div class='cnum'>27 <br/>Text1</div>
   <div class='cnum'>10 <br/>Text2</div>
   <div class='cnum'>40 <br/>Text 3</div>
   <div class='cnum'>5 <br/>Text 4</div>
 </div>

CSS

#c{
    padding-top:30px;
    padding-bottom:30px;
}
.cnum{
    background: black;
    border-radius: 5px;
    color: #fff;
    padding: 15px;
    margin:5px;
    font-size:20px;
    max-Width :100px;
    float :left
 }

Heres a CodePen