用Div创建Tiles

Question

我试图展示两个彩色瓷砖，一个在左边，一个在右边。它们每个都有一个较大字体的数字和一个较小字体的标题。它们应该在边缘周围有一些填充，这样文本就不会碰到瓷砖的边缘。

他们应该将他们坐在水平的容器填满。我已将两个瓷砖中的每一个设置为45％宽度，中间的元素为10％，总计为100％。

我用Table实现了这一点，一切正常。但我宁愿使用可以更容易重复使用的Div。

然而，当我尝试使用Divs构建它时，边框似乎使整个事物太宽而不适合。我不明白为什么。我尝试过Border，Margin和Padding的组合。

.info-tile {
  text-align: right;
  padding: 10px;
}
.info-tile-large-text {
  font-size: 400%
}
.info-tile-small-text,
.info-tile-large-text {}

<div>
  <table style="width:100%">
    <tr>
      <td class="info-tile pending-enquiry-colours" style="width:45%;"><span class="info-tile-large-text">86</span>
        <br/><span>Pending Enquiries</span>
      </td>
      <td class="" style="width:10%"></td>
      <td class="info-tile active-enquiry-colours" style="width:45%;"><span class="info-tile-large-text">15</span>
        <br /><span>Active Enquiries</span>
      </td>
    </tr>
  </table>

  <div>
    <div class="info-tile pending-enquiry-colours" style="width:45%; float: left;"><span class="info-tile-large-text">86</span>
      <br/><span class="info-tile-small-text">Pending Enquiries</span>
    </div>
    <div style="width:10%; float: left" ;></div>
    <div class="info-tile active-enquiry-colours" style="width:45%; float: right;"><span class="info-tile-large-text">15</span>
      <br /><span class="info-tile-small-text">Active Enquiries</span>
    </div>
  </div>
</div>

Answer 1

对遇到此问题的任何元素（也称为所有图块）使用box-sizing: border-box。

默认情况下，大多数浏览器会将box-sizing设置为content，这意味着如果您将元素的宽度设置为400px，并添加padding: 30px，则会计算总数元素的大小为460px。

box-sizing: border-box则相反，填充永远不会超过设定的宽度。