CSS Плавающие и встроенные интервалы

Question

Я пытаюсь добиться следующего:

Я использую float:left, чтобы иметь диапазон, содержащий имя пользователя, плавающее справа от больших чисел слева.

Вот что у меня есть на данный момент: https://jsfiddle.net/d00ck/twcmfzo8/2/ < / а>

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

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

Я явно упускаю что-то важное, так как не могу заставить диапазон, содержащий легенду «1000pts», плавать справа от большого числа. Любая помощь будет принята с благодарностью.

html css

0

mduck 7 Сен 2016 в 19:35

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/

0

NickyTheWrench 7 Сен 2016 в 16:40

Answer 2

Прежде всего добавьте точку с запятой в определение .container в CSS после padding-bottom . и добавьте float: right; margin-top: -20px; в .ranking_score

0

Jones Joseph 7 Сен 2016 в 16:44

Answer 3

Это потому, что поплавок недостаточно высок, чтобы воздействовать на три пролета. Вы можете попробовать увеличить высоту

.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>

0

Oriol 7 Сен 2016 в 17:04

CSS Плавающие и встроенные интервалы

3 ответа

Похожие вопросы

Новые вопросы

html