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 фев 2023 в 18:01
  • А как эти картинки должны выглядеть под "разные устройства"? 1 фев 2023 в 19:16
  • Добавил в описание картинку @Александр
    – GRCR13
    1 фев 2023 в 19:20

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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