Динамическая верстка изображений с помощью HTML / CSS

Question

Я бы хотел воссоздать следующий макет изображения с помощью HTML / CSS.В идеале, соотношение сторон изображения 2 будет автоматически настраиваться в соответствии с соотношением сторон изображений 3 и 4.

Я пытался сделать это с Flexbox, но я думаю, что мне придется вручную определять количество изгибов для каждого изображенияЭто боль.Есть ли способ сделать это динамически?

Answer 1

Вы должны использовать float, чтобы установить изображение рядом друг с другом.
Например (SCSS):

    .my-page{
        .layout-west{     <!-- For image 1 -->
            float: left;
            width: 186px;
        .layout-east{     <!-- Contain image 2, 3, 4, 5 -->
            float: left;
            width: 784px;

            .content-east{
                width: 784px; 
                margin: 0; 
                padding: 0; 

                .content-main{ <!-- Contain image 2, 3, 4 -->
                    float: left; 
                    margin: 0 10px 0 0; 
                    padding: 0px; 
                    width: 550px;
                .content-right{ <!-- Contain image 5 -->
                    float: left; 
                    width: 224px;
                }

В .content-main вы можете использовать flex to для изображений 3 и 4.