Разделенный 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

Человек, вы уже делаете это правильно.

* {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; 
 
     } 
 
    } 
 
    } 
 
}

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

Просмотр

Выход: http://jsbin.com/sasawofuda