Question

我试图实现以下目标：

我使用float:left让一个包含用户名的范围浮动到左边的大数字右侧。

这是我到目前为止所做的：https://jsfiddle.net/d00ck/twcmfzo8/2/

＆＃13;

body {
  font-family: arial;
}
.container {
  background-color: white;
  padding-bottom: 15px width: 360px;
}
.position {
  clear: both;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
  width: 100%;
}
.ranking-position {
  font-size: 25px;
  float: left;
}
.ranking-tier {
  display: block;
}
.ranking-score {
  clear: both;
}

＆＃13;

<div class="container">
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">Dorothy Bradley</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>

  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>

</div>

＆＃13;

我显然遗漏了一些重要的东西，因为我似乎无法让跨度包含＆＃34; 1000pts＆＃34;浮动到大数字右侧的图例。任何帮助将不胜感激。

Answer 1

您只需要更改

.ranking-tier {
  display: block;
}

到此：

.ranking-name {
  display: block;
}

这样的事情：

HTML：

    <div class="container">
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">Dorothy Bradley</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>

  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>

</div>

CSS：

body {

  font-family: arial;
}

.container{ 
  background-color: white;
  padding-bottom: 15px
  width: 360px;
}

.position {
  clear: both;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
  width: 100%;
}

.ranking-position {
  font-size: 25px;
  float: left;
}

.ranking-score {
  clear: both;
}

.ranking-name {
  display:block;
}

https://jsfiddle.net/twcmfzo8/5/

Answer 2

试试这个：

<div class="position">
  <div style="display:inline-block; float:left;">
  <span class="ranking-position">1</span>
    <span class="ranking-name">Dorothy Bradley</span>
    <span class="ranking-tier">1rs Team All...</span>
  </div>
    <div style="float:right; display:inline-block;">
    <span class="ranking-score" style="position:relative; top:20px;">1000pts</span>
    </div>
  </div>

Answer 3

首先在CSS中的 .container 定义中，在 padding-bottom 之后添加分号。并在 .ranking_score

中添加 float：right; margin-top：-20px;

Answer 4

那是因为浮子不够高，不足以影响三个跨度。你可以尝试强迫一些高度

.container {
  font-family: arial;
}
.position {
  overflow: hidden;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
}
span {
  display: block;
  font-size: 16px;
  line-height: 1.25em;
  height: 1.25em;
}
.ranking-position {
  font-size: 25px;
  height: 60px; /* 16px * 1.25 * 3 */
  float: left;
}

<div class="container">
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">Dorothy Bradley</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
</div>

或者将它们包装在flock格式化上下文根目录中：

.container {
  font-family: arial;
}
.position {
  overflow: hidden;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
}
.ranking-position {
  font-size: 25px;
  float: left;
}
.position > div {
  overflow: hidden;
}
span {
  display: block;
}

<div class="container">
  <div class="position">
    <span class="ranking-position">1</span>
    <div>
      <span class="ranking-name">Dorothy Bradley</span>
      <span class="ranking-tier">1rs Team All...</span>
      <span class="ranking-score">1000pts</span>
    </div>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <div>
      <span class="ranking-name">User Name</span>
      <span class="ranking-tier">1rs Team All...</span>
      <span class="ranking-score">1000pts</span>
    </div>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <div>
      <span class="ranking-name">User Name</span>
      <span class="ranking-tier">1rs Team All...</span>
      <span class="ranking-score">1000pts</span>
    </div>
  </div>
</div>

CSS浮动和内联跨度

4 个答案: