Question

我尝试了很多东西，但却无法获得所需的格式。 HTML：

<div class="usertype">
            <div class="type1">
              <span class="type-heading">type1 is here</span>
              <span class="type-description">10 types have joined</span>
              <span class="type-description">35 type will.</span>
            </div>
            <div class="type2">
              <span class="type-heading">type2 is here</span>
              <span class="type-description">10 types are there</span>
              <span class="type-description">35 type will.</span>
            </div>
            <div class="type1">
              <span class="type-heading">type23 is good</span>
              <span class="type-description">50 types are there</span>
              <span class="type-description">50 types are there</span>
              <span class="type-description">for 2 months</span>
            </div>
            <div class="type2">
              <span class="type-heading">Type4 at last</span>
              <span class="type-description">50 types are there</span>
              <span class="type-description">makes their first $20</span>
              <span class="type-description">50 types are there</span>
              <span class="type-description">35 type will.</span>
            </div>
          </div>

CSS：

div.usertype {
  margin-top: 1em;
}
div.type1 {
  float: left;
  margin-left: 2em;
}
span.type-heading {
  font-size: 14px;
  color: #f7f7f7;
}

span.type-description {
  font-size: 14px;
  color:#959595;
  display: block;
}

输出： Output

我想要的是什么：

使用类type-description减少跨距之间的垂直距离。我尝试使用line-height和padding-bottom但无法移动它。可能是某个父div有display:block。
所有类型描述都与左边对齐，现在是中心。如果我使用它float: left，它会彻底破坏格式。

请帮忙。

Answer 1

<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>

<style>

div.usertype {
  margin-top: 1em;
}
div.type1 {
  float: left;
  margin-left: 2em;
}
div.type2 {
  float: left;
  margin-left: 2em;
}
span.type-heading {
  font-size: 14px;
  color: #f7f7f7;
}

span.type-description {
  font-size: 14px;
  color:#959595;
  display: block;
  line-height:15px;
}
</style>

将div和span文本放在其中

1 个答案: