Мобильная версияИнтересно, существует ли чисто элегантное CSS-решение, позволяющее разместить текст рядом с элементом с плавающей запятой, расположенный под ним, когда его высота выше, чем элемент с плавающей запятой, НО ТАКЖЕ центрироваться, когда его высота ниже, чем элемент с плавающей запятой. Следующие два изображения представляют то, что я хочу получить:
И есть закодированная версия обоих случаев:
.float { плавать: вправо; высота: 80 пикселей; ширина: 500 пикселей; цвет фона: синий; } #with_text_centered { высота: 80 пикселей; положение: относительное; } #with_text_centered р { положение: относительное; верх: 50%; трансформировать: транслировать(0, -50%); С ТЕКСТОМ ПОД ПОПЛАВОМ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.
С ТЕКСТОМ ПО ЦЕНТРУ
Lorem ipsum.
Я могу сделать каждый отдельно, но не могу найти способ сделать оба (для целей адаптивного дизайна). Единственное решение, которое я нашел на данный момент, требует js (с использованием ResizeObserver), и мне кажется странным, что в этом случае приходится использовать js, что кажется довольно простым.
Кроме того, я бы предпочёл вообще не определять высоту где-либо. В моем примере я, к сожалению, определяю высоту 80 пикселей. Фактически, в моей версии, использующей js, я переключаюсь на флексбокс, когда текст ниже элемента float. IMO, проще и элегантнее центрировать текст. Когда я это делаю, число с плавающей запятой игнорируется (флексы созданы для игнорирования числа с плавающей запятой).
