Перенос на новую строку

266

04 марта 2018, 23:09

Имеется такой вот код:

<div class="grid__item grid__item--featured-collections small--one-half medium-up--one-fifth"> 
  <div class="grid-view-item"> 
    <a class="grid-view-item__link" href="/'.$row[" type_tovara "].'/'.$row["products_id "].'-'.ftranslite($row["title "]).'/"> 
      <div class="small--hide" style="margin-left: -35px;">'.$row["top_sales"].'</div> 
      <div class="site-header__menu" style="margin-top: 22px; margin-left: -35px;">'.$row["top_sales"].'</div> 
      <div class="small--hide" style="margin-left: -35px;">'.$row["under_order"].'</div> 
      <div class="small--hide" style="margin-left: -35px;">'.$row["novelty"].'</div> 
      <img class="grid-view-item__image" src="'.$img_path.'"> 
      <div class="h4 grid-view-item__title">'.$row["title"].'</div> 
      <div class="grid-view-item__meta"> 
        <span class="visually-hidden">Regular price</span> 
        <span class="product-price__price">'.group_numerals($row["price"]).' грн</span> 
      </div> 
    </a> 
  </div> 
</div>

Отображается вот так, видно что слово "Новинка" налезла сверху на другую этикетку.

Необходимо чтобы последующие этикетки если есть то чтобы они были с новой строки, как не пытался сделать, не получается, всегда съезжают этикетки вместе с фоткой кофты...

Стили этикеток прикрепляю:

.plus1{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; 
 z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;} 
  
.plus2{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; 
 z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;} 
  
.plus3{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; 
 z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;}

Пример как должно быть:

Answer 1

Не вижу в коде чтобы использовались классы стилей добавленные ниже. У вас все стили используют абсолютное позиционирование, соответственно этикетки у вас группируются в одной точке. Попробуйте создать какой-нибудь контейнер для этикеток с абсолютным позиционированием. Вместо того, чтобы указывать его для каждой этикетки.