Как сверстать блок, с необычно расположенными элементами?

Question

[LastGeneral]

Как сверстать, такой блок?

Comments

[Alams Stoyne]

Проще дизайнеру руки отрубить чтоб больше ерундой не занимался.
Сверстать можно, но для управления это боль...

можно через flex

<div class="d-flex">
	<div class="block_1">
		<div class="picture_1"></div>
		<div class="text_1"></div>
	</div>
	<div class="block_2 d-flex">
		<div class="picture_2 mt-auto"></div>
	</div>
</div>
<div class="d-flex">
	<div class="block_3">
		<div class="picture_3"></div>
	</div>
	<div class="block_4 d-flex flex-column">
		<div class="mr-auto text_2"></div>
		<div class="text_4"></div>
	</div>
</div>

Можно через position absolute

[Im p3l]

Для того чтобы повернуть картинки, используй

img {
  transform: rotate(0deg);
}

[Alams Stoyne]

Михаэль Вейк, Есть понятие "читаемость", не дураки придумали сетку, а это убожество больше похоже на стенд со стикерами.
Фото разного формата, текст пока рыба - но в реале будет отличаться по кол-ву символов и всё будет выглядеть "не так как на макете", а уж в мобиле это творчество будет еще хуже смотреться.

Так что если какой-то полиграфист занялся дизайном сайтов то его нужно учить или гнать в шею...

Answer 1

[neuromask]

Сверстай как будто он был выровнен(3 дива - картинка плюс текст), можно через 2 колонны, потом добавь отступы margin-top margin-left соответсвенно на правый верх и левый низ.