Css выпуск с рейтингом

Question

Выпуска

1. Значение перекрывается с моими звездами.

2. Также я хочу разрыв строки только после того, как 2 варианта, как

Value ***** Ambience ***** 
service***** Food ***** 

jsFiddle link

CSS

.rating { 
width: 95px; 
height: 19px; 
background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat; 
} 

.rating_05 {background-position: -95px 0;} 
.rating_10 {background-position: -76px -23px;} 
.rating_15 {background-position: -76px 0;} 
.rating_20 {background-position: -57px -23px;} 
.rating_25 {background-position: -57px 0;} 
.rating_30 {background-position: -38px -23px;} 
.rating_35 {background-position: -38px 0;} 
.rating_40 {background-position: -19px -23px;} 
.rating_45 {background-position: -19px 0;} 
.rating_50 {background-position: 0 0;} 

HTML

<div class="rating rating_40"> Value</div> 
<div class="rating rating_40"> Ambiance</div> 
<div class="rating rating_45"> Service</div> 
<div class="rating rating_45"> Food</div> 
<div class="rating rating_25"> Music</div> 

Может кто-нибудь помочь?

Answer 1

использование display: table

.rating { 
 
    display: table;  
 
} 
 
.rating-row{ 
 
    display: table-row; 
 
} 
 
.rating-text, 
 
.ratiog-star{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.rating-star{  
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat; 
 
    width: 95px; 
 
    height: 19px; 
 
    margin-left: 5px; 
 
} 
 
.rating_05 {background-position: -95px 0;} 
 
.rating_10 {background-position: -76px -23px;} 
 
.rating_15 {background-position: -76px 0;} 
 
.rating_20 {background-position: -57px -23px;} 
 
.rating_25 {background-position: -57px 0;} 
 
.rating_30 {background-position: -38px -23px;} 
 
.rating_35 {background-position: -38px 0;} 
 
.rating_40 {background-position: -19px -23px;} 
 
.rating_45 {background-position: -19px 0;} 
 
.rating_50 {background-position: 0 0;}

<div class="rating"> 
 
    <div class="rating-row"> 
 
     <div class="rating-text">Value</div> 
 
     <div class="rating-star rating_40"></div> 
 
    </div> 
 

 
    <div class="rating-row"> 
 
     <div class="rating-text">Ambiance</div> 
 
     <div class="rating-star rating_40"></div> 
 
    </div> 
 
    
 
    <div class="rating-row"> 
 
     <div class="rating-text">Service</div> 
 
     <div class="rating-star rating_45"></div> 
 
    </div> 
 
    
 
    <div class="rating-row"> 
 
     <div class="rating-text">Value</div> 
 
     <div class="rating-star rating_40"></div> 
 
    </div> 
 
    <div class="rating-row"> 
 
     <div class="rating-text">Food</div> 
 
     <div class="rating-star rating_45"></div> 
 
    </div> 
 
    <div class="rating-row"> 
 
     <div class="rating-text">Music</div> 
 
     <div class="rating-star rating_25"></div> 
 
    </div> 
 
</div>

использование :after

.rating { 
 
    
 
} 
 
.rating:after{  
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat; 
 
    width: 95px; 
 
    height: 19px; 
 
    margin-left: 5px; 
 
} 
 
.rating_05:after {background-position: -95px 0;} 
 
.rating_10:after {background-position: -76px -23px;} 
 
.rating_15:after {background-position: -76px 0;} 
 
.rating_20:after {background-position: -57px -23px;} 
 
.rating_25:after {background-position: -57px 0;} 
 
.rating_30:after {background-position: -38px -23px;} 
 
.rating_35:after {background-position: -38px 0;} 
 
.rating_40:after {background-position: -19px -23px;} 
 
.rating_45:after {background-position: -19px 0;} 
 
.rating_50:after {background-position: 0 0;}

<div class="rating rating_40"> Value</div> 
 
<div class="rating rating_40"> Ambiance</div> 
 
<div class="rating rating_45"> Service</div> 
 
<div class="rating rating_45"> Food</div> 
 
<div class="rating rating_25"> Music</div>

Answer 2

Поместите звезды в/на span внутри div и получите 2 "предметов" в каждом div.

Fixed fiddle

Answer 3

Нет необходимости изменения разметки здесь. Проверьте обновленную скрипку: https://jsfiddle.net/j3dsy29L/3/

Просто добавить некоторые правила стиля:

.rating { 
    float: left; 
    width: 95px; 
    height: 19px; 
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat; 
    text-indent: -70px; 
    margin-left: 70px; 
    margin-right: 10px; 
} 

.rating:nth-of-type(2n+1) { 
    clear: left; 
} 

Если вам необходимо поддерживать старые браузеры, которые не понимают :nth-of-type() селектора псевдо, это также может быть решен путем добавления класса CSS на каждый третий пункт: .rating.new-line { clear: left; }

<div class="rating rating_40"> Value</div> 
<div class="rating rating_40"> Ambiance</div> 
<div class="rating rating_45 new-line"> Service</div> 
<div class="rating rating_45"> Food</div> 
<div class="rating rating_25"> Music</div>