1

Нужно чтобы блок -17% был в правом верхнем углу, но он туда не стаёт, как исправить?

.slideritem
{
	font-family: 'Century Gothic';
	margin: 1vh;
	display: inline-block;
	font-weight: 800;
	border-width: 1px!important;
	border-color: black;
	border-style: solid;
}
<div class="slideritem">
      <center>
        <p>Атланта (Сталекс)</p>
        <a data-fancybox="gallery" href="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiPzZn0qbHhAhVjlosKHR9jCYcQjRx6BAgBEAU&url=http%3A%2F%2Fm.androidmafia.ru%2Fvideo%2Fw3gFbTu0fh4&psig=AOvVaw18NebfLZm_rOdm1HZPhEPM&ust=1554291685571624">
            <img src="http://giftpic.ru/wp-content/uploads/2016/08/originalnaya-kartinka-spasibo-skachat-besplatno.jpg" class="img-fluid" style="min-height: 140px!important;max-width:120px;">
        </a>
        <div class="sale" style="position: relative;right:0;background:red;text-align:right;width:40px;">-17%</div>
        <p>115  м<sup>2</sup></p>
        <p class="smlet">0,4 мм (глянец) Китай</p>
        <p>10 лет эстетическая гарнтия</p>
        <a class="btnprod" type="button" data-toggle="modal" data-target="#buyprod">ЗАКАЗАТЬ</a>
    </div></center>

1 ответ 1

1

Я вынес блок с % наверх и сделал ему float:right;

.slideritem
{
	font-family: 'Century Gothic';
	margin: 1vh;
	display: inline-block;
	font-weight: 800;
	border-width: 1px!important;
	border-color: black;
	border-style: solid;
}

.sale {
  position: relative;
  float:right;
  background:red;
  text-align:right;
  width:40px;
}
<div class="slideritem">
  <div class="sale" >-17%</div>
  <br>
  <center>          
    <p>Атланта (Сталекс)</p>
    <a data-fancybox="gallery" href="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiPzZn0qbHhAhVjlosKHR9jCYcQjRx6BAgBEAU&url=http%3A%2F%2Fm.androidmafia.ru%2Fvideo%2Fw3gFbTu0fh4&psig=AOvVaw18NebfLZm_rOdm1HZPhEPM&ust=1554291685571624">
      <img src="http://giftpic.ru/wp-content/uploads/2016/08/originalnaya-kartinka-spasibo-skachat-besplatno.jpg" class="img-fluid" style="min-height: 140px!important;max-width:120px;">
    </a>
    <p>115  м<sup>2</sup></p>
    <p class="smlet">0,4 мм (глянец) Китай</p>
    <p>10 лет эстетическая гарнтия</p>
    <a class="btnprod" type="button" data-toggle="modal" data-target="#buyprod">ЗАКАЗАТЬ</a>
  </center>
</div>

Вот вариант с грязным способом: отрицательный margin-top:

.slideritem {
	font-family: 'Century Gothic';
	margin: 1vh;
	display: inline-block;
	font-weight: 800;
	border: 1px solid black;
}

.sale {
  position:relative;
  display: inline-block;
  background: red;
}
<div class="slideritem">
  <div style="text-align:right">
    <div class="sale">-17%</div>
  </div>
  <div style="margin-top: -25px">
    <center>          
      <p>Атланта (Сталекс)</p>
      <a data-fancybox="gallery">
        <img src="http://giftpic.ru/wp-content/uploads/2016/08/originalnaya-kartinka-spasibo-skachat-besplatno.jpg" class="img-fluid" style="min-height: 140px!important;max-width:120px;">
      </a>
      <p>115  м<sup>2</sup></p>
      <p class="smlet">0,4 мм (глянец) Китай</p>
      <p>10 лет эстетическая гарнтия</p>
      <a class="btnprod" type="button" data-toggle="modal" data-target="#buyprod">ЗАКАЗАТЬ</a>
    </center>
  <div>
  
</div>

7
  • У меня слик слайдер, и при указании position:absolute слайды пропадают
    – Oleksandr
    2 апр 2019 в 12:51
  • 1
    @Alexander поменял ответ 2 апр 2019 в 13:06
  • 1
    @Alexander сейчас попробуем 2 апр 2019 в 13:24
  • 1
    @Alexander добавил еще сниппет 2 апр 2019 в 13:44
  • 1
    @Alexander Обращайтесь 2 апр 2019 в 13:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.