Эта тенденция наблюдается уже некоторое время, но я не нашел подходящего решения.
У меня есть два отдельных компонента, которые имеют разноцветный фон, и мне нужно, чтобы содержимое первого компонента было перенесено во второй компонент и, таким образом, вытолкнуло его содержимое вниз.
Я даже не уверен, возможно ли это. Это в основном, как они будут структурированы:
<div class=”component-1 blue”>
<!-- This block of content should push down any content in a preceding component -->
<div class=”content-1”></div>
</div>
<div class=”component-2 pink”>
<!-- This block of content should get pushed down because of the block above it. Without the one above, it wouldn't be pushed down. -->
<div class=”content-2”></div>
</div>
Вот так должно выглядеть, когда компонент 1 опускает содержимое компонента 2s.
И вот как это будет выглядеть, когда компонента 1 нет, чтобы толкнуть компонент 2.
В идеале решение не должно иметь стиль, подобный следующему:
.component-1 + .component-2 {...} // Now push component-2 down a set amount.
Так как это означало бы, что каждый построенный компонент должен был бы добавить этот стиль на тот случай, если он появится после компонента-1. И если содержимое компонента-1 изменится, нам нужно будет изменить ситуацию снова.
А вот настройка JSFiddle, которая не работает , если вы хотите попробовать.
Я пытался использовать поплавки, сворачивание полей, задание определенной высоты. Я чувствую, что это возможно, но также возможно.
Как бы вы подошли к этой проблеме, чтобы она хорошо масштабировалась, и компоненты можно было легко перемещать, не нарушая сайт.