Html 除名下的除名

我的html样式有问题。我的HTML和CSS如下所示：

HTML:

<div class='page summary'>
  <div class='scores distribution-hidden'>
    <div class='score-item'>
      <div class='score-box'>
        50%
      </div>
      <h2 class='score-name'>
        Your Result
      </h2>
    </div>
  </div>
</div>

.summary .scores .score-item {
  clear: both;
  height: 60pt;
  margin: 15pt 0 0 0;
  padding-left: 10pt;
}
.summary .scores .score-name {
  color: blue;
  float: left;
  line-height: 30pt;
  font-size: 30pt;
}
.summary .scores .score-box {
  float: right;
  background-color: #00A600;
  color: white;
  line-height: 30pt;
  font-size: 20pt;
  width: 60pt;
  text-align: center;
}
.summary .scores.distribution-hidden .score-box {
  width: 160pt;
}

现在我想在这个分数框下加上除法div。应该是这样的：

以下是指向JSFIDLE的链接：

---

我试着这么做，但它看起来总是很难看。我怎样才能用css做到这一点呢？

伙计，你已经做对了

*{框大小：边框框；}
.摘要{
.分数{
.评分项目{
明确：两者皆有；
高度：60磅；
利润率：15分0；
左侧填充：10磅；
}
.分数名称{
保证金：0；
颜色：蓝色；
线路高度：30磅；
字号：20pt；
溢出：隐藏；
宽度：215px；
跨度{
字号：10pt；
浮动：左；
宽度：30%；
边框：3倍实心；
左边距：-1px；
左：3倍；
右侧填充：3px；
&：第一个孩子{
宽度：70%；
左边距：0px；
左侧填充：0；
}
}
}
.记分箱{
背景色：#00A600；
颜色：白色；
线路高度：30磅；
字号：20pt；
宽度：215px；
文本对齐：居中；
}
&.隐藏的分发{
.记分箱{
宽度：160磅；
}
}
}
}

50%
13年秋天
50%

我不确定你的问题是什么。您的HTML与提供的图像不匹配。我希望得到与此图像类似的结果。但是我不知道如何修改我的html和css来获得它。所以我们可以对html进行编码？是的，我已经将JSFIDLE与我的html和css一起添加到可以修改它的人。错误单击，抱歉。。。