Div div div div下的div

-1

我有造型我的html的問題。我有HTML和CSS，看起來像這樣：Div div div div下的div

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

現在我想在這個分數框中添加分格。它應該是這樣的：

這裏是鏈接的jsfiddle：https://jsfiddle.net/k666a9wu/

我試圖做到這一點，但它總是看起來醜陋。我怎樣才能做到這一點與CSS？

來源

2016-01-21 Mateusz Urbański

我不知道你的問題在這裏。您的HTML與提供的圖片不符。 –

我想要得到像這個圖像上的結果。但我不知道如何修改我的html和CSS來獲取它。 –

那麼我們可以使用HTML？ –

男人，你已經在做對了。

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

來源

2016-01-21 15:50:10

Div div div div下的div

回答

相關問題