0

Есть 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>

3
  • position: absolute. Это тот же position: relative только игнорируется от родительского блока и не занимает в нем места.
    – eccs0103
    1 фев в 18:01
  • А как эти картинки должны выглядеть под "разные устройства"? 1 фев в 19:16
  • Добавил в описание картинку @Александр
    – GRCR13
    1 фев в 19:20

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.