在div下划分div

Question

我的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>

CSS：

.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。它应该如下所示：

这是jsfiddle的链接：https://jsfiddle.net/k666a9wu/

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

Answer 1

伙计，你已经做对了。

＆＃13;

＆＃13;

* {box-sizing: border-box;}
.summary {
  .scores {
    .score-item {
      clear: both;
      height: 60pt;
      margin: 15pt 0 0 0;
      padding-left: 10pt;
    }

    .score-name {
      margin: 0;
      color: blue;
      line-height: 30pt;
      font-size: 20pt;
      overflow: hidden;
      width: 215px;
      span {
        font-size: 10pt;
        float: left;
        width: 30%;
        border: 3px solid;
        margin-left: -1px;
        padding-left: 3px;
        padding-right: 3px;
        &:first-child {
          width: 70%;
          margin-left: 0px;
          padding-left: 0;
        }
      }
    }

    .score-box {
      background-color: #00A600;
      color: white;
      line-height: 30pt;
      font-size: 20pt;
      width: 215px;
      text-align: center;
    }

    &.distribution-hidden {
      .score-box {
        width: 160pt;
      }
    }
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

输出：http://jsbin.com/sasawofuda