代码之家 › 专栏 › 技术社区 › Mateusz UrbaÅski

div下的div

css html

-1

Mateusz UrbaÅski · 技术社区 · 10 年前

我对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做到这一点?

1 回复 | 直到 10 年前

Praveen Kumar Purushothaman 10 年前

伙计,你已经做对了。

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

预览