Сделать элемент потоком приоритета, чтобы он не охватывал другие элементы?

Question

У меня есть 3 элемента на странице. [1 2 3]. Все 3 имеют динамическую ширину c, и я бы хотел, чтобы средний элемент оставался посередине и не был обернут вокруг. Поэтому, когда левый или правый элементы начнут переполняться, они будут выталкиваться вниз, а не средний элемент.

Я не уверен, как на самом деле это сделать. Я пробовал это с упорядочением гибких, но это на самом деле меняет поток документа. Я также думал о смещении элемента 1 в позицию элемента 2 и элемента 2 в позицию элемента 1, но как только элемент 2 будет сдвинут вниз, это будет выглядеть странно.

В случае любой путаницы я в основном пытаясь получить поток [1 2 3] с визуальным элементом [2 1 3], чтобы центральный элемент не выталкивался.

Answer 1

Был в состоянии сделать это с помощью поплавков. Установите dom как обычный поток элементов, чтобы средний элемент был первым в потоке, левый элемент вторым, а правый элемент третьим. Поплавок оставил второй элемент.

Answer 2

Я пытаюсь понять вашу проблему , поэтому я отвечу вам в соответствии с тем, что я понял! Вы можете поместить все элементы в div отца и стилизовать его в CSS с помощью position: relative; и поместить все элементы в этот div отца, тогда все эти "сыновья" элементы принимают стиль css position: absolute, и вы получаете контроль над их top, right, left

вы также можете использовать bootstrap или любой другой фреймворк, как это или пока делаете это в чистом виде CSS и JS.

Я надеюсь, что я понял, что вы точно хочу и тебе это помогло.