3

Есть совместный блок с ценой стандартной и скидочной. Хочу поменять последовательность вывода стандартная цена, затем скидочная, причем оба блока должны выводиться по центру и цена будет каждый раз разная (а значит и ширина блоков будет каждый раз разная). Как это можно сделать с помощью стилей не меняя структуры html ? фидл

del {
  float: right;
}
.price {
  text-align: center;
}
<div class="price"><del><span class="amount">11.390&nbsp;<ruble title="руб.">руб.</ruble></span></del>  <ins><span class="amount">9.340&nbsp;<ruble title="руб.">руб.</ruble></span></ins>
</div>

4 ответа 4

5

Есть еще такой вариант

.price {
  position: relative;
  text-align:center;
}
del {
  position: absolute;
  top: 0;
  left: 50%;
}
ins {
  position: absolute;
  top: 0;
  right: 50%;
}

https://jsfiddle.net/skywave/y837g3gn/4/

1
  • о вот так - супер! мне нравится. единственное, нужно поставить по 51% для отступов и для price назначить min-height
    – Вася
    14 апр 2016 в 8:35
4

Вот как можно перепозиционировать элементы:

.price{
  width: 100%;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center; 
  justify-content: center;
}
8
  • к сожалению, flex сегодня еще не кроссбраузерный.. и при таком подходе элементы будут не по центру
    – Вася
    14 апр 2016 в 8:11
  • На самом деле самый лучший ответ из всех представленных. 14 апр 2016 в 8:11
  • @Василий Барбашев я уже написал, почему он не подходит.. мне нужно кроссбраузерное решение и выравнивание по центру
    – Вася
    14 апр 2016 в 8:13
  • @Вася Да, но понятие кроссбраузерности уже устарела. Это как использовать XP по сей день, имея на руках как минимум Win7:) Шутки шутками, но это наиболее современный и чистый подход. 14 апр 2016 в 8:13
  • 2
    @Вася jsfiddle.net/do30p7ac пожалуйста, отцентрировал. Использование flex, является самым лучшим средством для верстки. Просто мало кто на нем что то умеет делать. 14 апр 2016 в 8:17
2

Если рядом нету других инлайновых элементов, то может такой подход сможет помочь? jsfiddle.net/y837g3gn/2/

<div class="price"><del><span class="amount">11.390&nbsp;<ruble title="руб.">руб.</ruble></span></del> <ins><span class="amount">9.340&nbsp;<ruble title="руб.">руб.</ruble></span></ins></div>

del {
  float:left;
  margin-left: -50%;
}
.price {
  display: inline-block;
  margin-left: 50%;
}


Если есть, то после обеда можно поколдовать еще.

6
  • первой должна идти цена со скидкой
    – Вася
    14 апр 2016 в 8:09
  • 1
    @Вася дак поменяй у del - float: left на float: right 14 апр 2016 в 8:11
  • @Василий Барбашев лучше, но цена смещена от центра
    – Вася
    14 апр 2016 в 8:15
  • @Олег Дёгтев да, давайте еще поколдуем - решение где-то уже близко
    – Вася
    14 апр 2016 в 8:16
  • Skywave придумал интересное решение. Там есть лишние строки, но идея хороша. Воспользуйтесь.
    – user200141
    14 апр 2016 в 8:23
2

.price {
  text-align: center;
  position: relative;
  min-height: 1px;
}
del {
  position: absolute;
  transform: translateX(5%);
}
ins {
  position: absolute;
  transform: translateX(-105%);
}
<div class="price">
  <del>
    <span class="amount">11.390&nbsp;  <ruble title="руб.">руб.</ruble>
    </span>
  </del>
  <ins>
    <span class="amount">9.340&nbsp;  <ruble title="руб.">руб.</ruble>
    </span>
  </ins>
</div>

3
  • да, супер! только поставьте 110% для отступа и нужно min-height price назначить, чтобы блок не схлопнулся и не наехал
    – Вася
    14 апр 2016 в 8:51
  • 1
    @Вася для добавления расстояния между ними отступы изменил на 5% и 105% - так ровнее будет относительно центра. а min-height то я добавил, но это уже другая история, не по теме)
    – lexxl
    14 апр 2016 в 8:57
  • Давайте продолжим обсуждение в чате.
    – lexxl
    14 апр 2016 в 9:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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