Как перепозиционировать элементы не меняя структуры html?

#html #css #css3 #позиционирование

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



del {
  float: right;
}
.price {
  text-align: center;
}
11.390 руб.
 9.340 руб.




    

Ответы

Ответ 1

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

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


Ответ 2

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

.price{
  width: 100%;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center; 
  justify-content: center;
}


Ответ 3

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

11.390 руб.
9.340 руб.

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


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


Ответ 4

.price {
  text-align: center;
  position: relative;
  min-height: 1px;
}
del {
  position: absolute;
  transform: translateX(5%);
}
ins {
  position: absolute;
  transform: translateX(-105%);
}

  
    11.390   руб.
    
  
  
    9.340   руб.