дисплей портит размер div

Question

Это до реализации display: inline-flex;:

код:

.testing {
    float: right;
    }

Это после того, как display: inline-flex; реализовано:

код:

.testing {
    float: right;
    display: inline-flex;
    }

Answer 1

Float удаляет элемент из нормального потока и делает его «блочным» элементом. Если display: flex; или display: inline-flex; используется с float, то float не влияет на этот конкретный элемент. В вашем случае «inline-flex» изменяет размер элемента div, чтобы он соответствовал той конкретной строке, где он «встроен»;

Если вы хотите, чтобы ваш элемент был одинакового размера и выровнен по правому краю, вы должны использовать Flexbox , более конкретно, использовать display: flex; для родительского элемента и justify-self: end; для дочернего элемента. Подробнее здесь: Justify-self: end