Позиционирование картинки и блока

Question

Позиционирование картинки и блока

Рейтинг: 0Ответов: 0Опубликовано: 01.02.2023

Есть 3 блока и 3 картинки, а как картинку позиционировать я не понимаю. Подумал о position: relative, но блок поделился на 2 части

Как сделать желательно без position absolute такое расположение картинок(сложно будет адаптировать под разные устройства)

так должно выглядеть на мобилке

.blue_button {
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
    padding: 20px;
    margin: 0 auto;
    width: 55%;
    background: rgba(48, 156, 255, 1);
    box-shadow: 0px 2px 50px rgb(48 156 255 / 44%), 0px 6px 0px #0015d1, inset 0px 0px 14px rgb(255 255 255 / 30%);
    border-radius: 10px;
}

.block_finde_mate_description
{
    display: flex;
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: #FFFFFF;
        margin: 0 auto;
        width: 80%;
}

.block_finde_mate_title
{
    display: flex;
        text-align: center;
        margin: 0 auto;
        font-weight: 700;
        font-size: 25px;
        line-height: 31px;
}

.wrapper_choose_find_type {
    display: flex;
    justify-content: center;
    width: 400px;
    background: rgba(47, 55, 122, 1);
    border-radius: 15px;
    height: 314px;
    flex-basis: 25vh;
    flex: 0 1 auto;
}

#wrapper_find_mate_or_server
{
    display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: center;
        flex-wrap: wrap;
}

<div id="wrapper_find_mate_or_server">

                 <div class="wrapper_choose_find_type">
                    <img src="https://thzphotonics.org/test1/img/mainpageRobot.png" alt="">

                    <div style="display: flex;flex-direction: column;gap: 15px;justify-content: space-evenly;">
                        <div class="block_finde_mate_title">
                            Поиск напарников</div>
                        <div class="block_finde_mate_description">
                            Воспользуйтесь поиском напарников, чтобы
                            найти тиммейтов для игры</div>

                        <button class="blue_button">Найти напарника</button>

                    </div>
                </div>

                 <div class="wrapper_choose_find_type">


                     <div style="display: flex;flex-direction: column;gap: 15px;justify-content: space-evenly;">
                         <div class="block_finde_mate_title">
                             Поиск напарников</div>
                         <div class="block_finde_mate_description">
                             Воспользуйтесь поиском напарников, чтобы
                             найти тиммейтов для игры</div>

                         <button class="blue_button">Найти напарника</button>

                     </div>
                 </div>

                 <div class="wrapper_choose_find_type">


                     <div style="display: flex;flex-direction: column;gap: 15px;justify-content: space-evenly;">
                         <div class="block_finde_mate_title">
                             Поиск напарников</div>
                         <div class="block_finde_mate_description">
                             Воспользуйтесь поиском напарников, чтобы
                             найти тиммейтов для игры</div>

                         <button class="blue_button">Найти напарника</button>

                     </div>
                 </div>

            </div>

css javascript

Источник: Stack Overflow на русском

Позиционирование картинки и блока

Ответы