1

私は多くのことを試しましたが、目的のフォーマットを取得できませんでした。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;
}

出力： 出力

私が欲しいもの：

  1. class でスパン間の垂直距離を減らしtype-descriptionます。使っline-heightてみpadding-bottomましたが動かせませんでした。一部の親 div が持っている可能性がありdisplay:blockます。
  2. すべてのタイプの説明が左に配置され、現在は中央に配置されています。私がそれを使用するとfloat: left、フォーマットが完全に台無しになります。

助けてください。

4

1 に答える 1

0 
<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>
于 2013-03-24T19:09:16.257 に答える