Html 浮动元素应在同一行上，但在两行上渲染

statistic2 div

中的我的h2文本未与

statistic1 h2文本的右侧对齐

这是我的HTML：

<div class="statistics">
<div class="statistic1"><h2>Top 100 Highest Number of Comments</h2></div>
<div class="statistic2"><h2>Top 100 Highest Number of Comments</h2></div>
</div>

以下是输出：

将边框框：框大小属性添加到带有边框的类中，边框为“static1”，下面是对框模型@Smile0ff的解释。我不知道设置宽度和高度属性与向右浮动div有什么关系。我尝试了你的建议，并在类
statistic1
中添加了
box size:border box
，但它不起作用给你go@Smile0ff-你在作弊。您在代码笔中所做的只是将两个元素向左浮动，甚至不需要边界框不，你不对，你把两个div的宽度都设置为50%，然后加上+1px边框，所以现在你的总宽度是100%+1px
.statistics {
  position: relative;
  height: 500px;
  background-color: #ffffff;
  width: 1200px;
  margin: 0px auto;
  padding: 20px 25px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  font: 14px/20px Arial, Helvetica, Sans-serif;   
}
.statistic1 {
  width:50%;
  border-right: 1px solid #d0d0d0;
  float:left;   
}
.statistic2 {
  width:50%;
}
.statistics .statistic h2 {
  font: 24px/24px DinWebCond, Sans-serif;
  color: #606060;
  margin: 0px 0px 5px 0px;
  text-transform: uppercase;
}