使用 Div 创建平铺

Question

我正在尝试显示两个彩色图块，一个在左侧，一个在右侧。它们每个都有一个较大字体的数字和一个较小字体的标题。它们的边缘应该有一些填充，这样文本就不会撞到图块的边缘。

他们应该水平装满他们所在的容器。我已将两个图块中的每一个都设置为 45% 宽度，其中一个元素位于 10% 的中间，总计 100%。

我已经通过表格实现了这一点，并且一切正常。但我宁愿使用更容易重复使用的 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，则计算元素的总大小为@987654326 @。

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