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» легенду поплавок справа от большого числа. Любая помощь будет принята с благодарностью.

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

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

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>

Или завернуть их внутрь флок форматирования контекста корня:

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