Каким способом посоветуете переместить данный блок?

Question

[Genri_Rus]

Есть блок с заголовком:

<div class="wrapper">
	<div class="block-image">
	  
	</div>

	<div class="block-info">
	  <h1 class="block-info__title">Заголовок</h1>
	</div>
</div>

Как вообще можно переместить блок с классом block-info__title в block-image ?

P.S. Знаю, что есть display: flex и его замечательное свойство order, но order работает только внутри блоков

Comments

[FeST1VaL]

а зачем его так перемещать? в чем задача

[Genri_Rus]

Артем Будин, в адаптиве, нужно заголовок над картинкой поместить

[WapSter]

Genri_Rus, скрой его, перемести при помощи js после перемещения покажи.

[Ankhena]

Genri_Rus, Обычно это решается float'ом или абсолютом. Если разметка действительно такая.

Но покажите нормально с картинками как должно выглядеть.

Видимо, это аналогичный вопрос: Как верстаются такие блоки адаптивно?

[Genri_Rus]

WapSter, у меня из-за js блок не сразу появляется

[Genri_Rus]

Ankhena, position: absolute от body ?

[Ankhena]

Genri_Rus, видите ли...
Название block-image намекает на проблемы с разметкой.
Наверное.
Но это не точно.
Потому что пример макета я попросила еще в прошлом посте.

Если это не так, то ничего не мешает сделать им общую обертку и от нее абсолютить. Но это опять не точно по той же причине ))

[Genri_Rus]

Ankhena, из имеющего примера только position: absolute поможет ?

Или все таки js использовать ?

[Ankhena]

Genri_Rus,

из имеющего примера только position: absolute поможет ?
Или все таки js использовать ?

ампутировать
либо вы всё таки покажете макет...

Вы можете заменить в нем картинки, тексты на lorem или прислать его в личку архивом под паролем, а пароль телеграфом, если там всё настолько секретно.

[Genri_Rus]

Ankhena, вот пример: https://codepen.io/Genri_Rus/pen/BaNqwqY

На 660px нужно заголовок над изображением переместить, а описание и кнопку - под изображением

[Ankhena]

Genri_Rus, вау

Гриды - идеально. Но вам хочется ИЕ :(

Float'ами похоже не выйдет, только если заголовок ставить над картинкой.
Дублировать на js я вообще против. Если выбирать вариант с js, то я бы тогда лучше считала высоту блока и использовала flex-direction column.
Остается абсолют.

=> я бы забила на ИЕ и использовала grid.
Ну а в ИЕ блоки будут идти себе по порядку сверху вниз и норм.

[Genri_Rus]

Ankhena, пример с js высотой и flex-direction column неплохо было бы посмотреть )

Не совсем понятно

[Ankhena]

Genri_Rus, выяснить на js высоту блока с картинкой и заголовка. Сложить их. Учесть отступы вокруг и между ними.
Сравнить с высотой правого блока. Выбрать большее.
Получившееся значение задать как высоту родительского блока.
Родителю flex-direction column.

[Genri_Rus]

Ankhena, и вы считаете это проще, чем:

Дублировать на js я вообще против.

Сколько строк в js уйдет на данную настройку ?

[Ankhena]

Genri_Rus,

Сколько строк в js уйдет на данную настройку ?

Можно в 6
Можно и в меньше, но это как-то совсем...

[Genri_Rus]

Ankhena, из-за одного заголовка 6 строк наверно неоптимальный вариант

Тут наверно только js с перемещением, либо абсолютное позиционирование

[Ankhena]

Genri_Rus, мне кажется, я уже все варианты написала и даже написала как я поступила бы в этой ситуации :)

Answer 1

[eternalfire]

Как раз для этого и придумали display: grid

Comments

[Genri_Rus]

Grid на ie нормально не работает

[eternalfire]

Genri_Rus, это да(
Хотя теперь ie на chromium базируется)

[Genri_Rus]

eternalfire, да, но у меня win7 и не у всех есть win10

[eternalfire]

Genri_Rus, тогда, мне кажется, тут только js поможет, если на бэкенд нельзя повлиять (офк)

[Ankhena]

eternalfire, ie не базируется на chromium, не путайте ie и edge и не вводите людей в заблуждение.

[eternalfire]

Ankhena, верно, пардон