Как выровнять inline-block по правому краю без контейнеров?

Question

[MadWastefield]

Нужен css стиль выравнивающий inline-block всегда по правому краю, без использования обёрток (контейнеров).
Float - не пойдёт, элемент не должен вырываться из потока.
Margin 0 0 0 auto - не работает, пока не уберу display: inline-block.

Впрочем, если есть какой то способ не использовать inline-block и иметь "обтягивающий контейнер", который выравнивается, через Margin 0 0 0 auto то согласен и на такое.

Comments

[Иван]

юзай флексы

[MadWastefield]

Иван: Я собираюсь использовать этот блок в текстах статей на WordPress. Чтобы юзать флексы, мне получается нужно будет добавить display: flex к классу всего контента. Это не повлияет на стандратные механизмы разметки WordPress. Я не достаточно глубоко знаю флексы, из ограничений там такое:

для внутренних блоков не работают float, clear и vertical-align, а так же свойства, задающие колонки в тексте.

Всё это в WP вроде и не используется. Есть какие нибудь ещё особенности, которые могут всё испортить?

Answer 1

[Михаил Захаров]

Можно использовать на этот блок float: right, а на следующий добавить clear: both. А вообще лучше конкретный пример скинуть. Хотя бы на jsfiddle.

Comments

[MadWastefield]

Не хочу Float. Стиль предназначается для быстрого универсального использования прямо по ходу написания контента, причём должен встраиваться в любую часть статьи, а необходимость добавлять следующим элементам clear - это уже гемор.
Вот код на JSfidle: https://jsfiddle.net/ratk1rw9/
И вот на всякий пожарный сам код:

<div class = "right">
текст
</div>

.right
{
  display: inline-block;
  border: solid 2px black;
  padding-left: 3px;
  padding-right: 3px;
  margin: 0 0 0 auto;
}

[Михаил Захаров]

MadWastefield: можете ближайшему родителю просто задать display: flex. Тогда ваши маргины будут работать и с инлайн-блоком )

[MadWastefield]

Михаил Захаров: Спасибо, про это не знал. Но не буду скорее всего использовать потому что внутри флекса не работают float, clear и vertical-align, а так же свойства, задающие колонки в тексте, не хотелось бы накладывать такие ограничения на весь контент.

[Михаил Захаров]

MadWastefield: тогда попробуйте вариант с float: right, а псевдоэлементу (::after) этого блока задайте clear: both. Но не уверен.

[MadWastefield]

Михаил Захаров: https://jsfiddle.net/mqx1b56e/
Не получается. Вообще странно, что он этот after добавляет в сам блок, а не после него.

В доках сказано, что :after работает с block, inline, none, list-item может в этом проблема, хотя когда менял display на block всё равно работало так же.

Answer 2

[Андрей Токмаков]

Как то так https://jsfiddle.net/zb7bdj3o/1/

Comments

[MadWastefield]

Увы не пойдёт. Такой контейнер не растягивается при переполнении.

[Андрей Токмаков]

MadWastefield: Вы хотите и рыбку съесть и ... всё сверстать, так не бывает

[Андрей Токмаков]

MadWastefield: Либо фиксированный размер либо флоаты/флексы

Answer 3

[Артём Ведищев]

Мой вариант
https://jsfiddle.net/xxkwdtwb/1/

Comments

[MadWastefield]

без использования обёрток (контейнеров).

[Артём Ведищев]

MadWastefield: А так: https://jsfiddle.net/xxkwdtwb/2/ ?

[MadWastefield]

Артём Ведищев: Через флексы уже предлагали. Всё равно ведь родителя затрагиваем.