0

как разместить блоки как на картинке НЕ ИЗМЕНЯЯ HTMl ? введите сюда описание изображения

левый квадрат не хочет занимать 100% высоты, а занимает 100% ширины(так у меня получилось) введите сюда описание изображения

        .last_request_wrapper {
            display: flex;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }

        .last_request_wrapper>* {
            padding: 10px;
            margin: 5px;
        }

        .last_request_container {
            display: flex;
            /* flex-wrap: wrap; */
            background-color: blueviolet;
            flex-direction: column;
        }

        .last_request_title {
            text-align: left;
            background: deepskyblue;
            /* flex: 3 0px; */
            /* order: 2; */
            width: 56%;
            display: flex;
            flex-wrap: wrap;
            place-self: flex-end;

        }

        .last_request_photo {
            /* width: 64px; */
            /* height: 64px; */
        }

        img {
            width: 64px;
            height: 64px;
        }


        .last_request_description {
            background: lightgreen;
            width: 50%;
            display: flex;
            place-self: flex-end;
        }
<div class="last_request_wrapper">

        <div class="last_request_container">

            <div class="last_request_title">

                last_request_title

            </div>

            <div class="last_request_photo">
                <div>
                    <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
                        alt="">
                </div>

            </div>

            <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus
                voluptate
                ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis
                repellendus accusantium saepe mollitia. Id, quos.</div>

        </div>

        <div class="last_request_container">

            <div class="last_request_title">

                last_request_title

            </div>

            <div class="last_request_photo">
                <div>
                    <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
                        alt="">
                </div>

            </div>

            <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus
                voluptate
                ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non
                debitis
                repellendus accusantium saepe mollitia. Id, quos.</div>

        </div>

        <div class="last_request_container">

            <div class="last_request_title">

                last_request_title

            </div>

            <div class="last_request_photo">
                <div>
                    <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
                        alt="">
                </div>

            </div>

            <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta
                natus voluptate
                ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure,
                dolores non debitis
                repellendus accusantium saepe mollitia. Id, quos.</div>

        </div>

        <div class="last_request_container">

            <div class="last_request_title">

                last_request_title

            </div>

            <div class="last_request_photo">
                <div>
                    <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
                        alt="">
                </div>

            </div>

            <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Soluta natus voluptate
                ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto
                iure, dolores non debitis
                repellendus accusantium saepe mollitia. Id, quos.</div>

        </div>





    </div>

1 ответ 1

2

Я бы сделал это с помощью display: grid.

.last_request_wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.last_request_wrapper > * {
  padding: 10px;
  margin: 5px;
}

.last_request_container {
  background-color: blueviolet;
  
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
}

.last_request_title {
  grid-column: 2;
  background: deepskyblue;
}

.last_request_photo {
  width: 64px;
  height: 64px;
  
  grid-column: 1;
  grid-row: 1 / 3;
  
  align-self: center;
}

img {
  width: 64px;
  height: 64px;
}

.last_request_description {
  grid-column: 2;
  background: lightgreen;
}
<div class="last_request_wrapper">

  <div class="last_request_container">

    <div class="last_request_title">

      last_request_title

    </div>

    <div class="last_request_photo">
      <div>
        <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg" alt="">
      </div>

    </div>

    <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus voluptate ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis repellendus accusantium saepe mollitia. Id, quos.</div>

  </div>

  <div class="last_request_container">

    <div class="last_request_title">

      last_request_title

    </div>

    <div class="last_request_photo">
      <div>
        <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg" alt="">
      </div>

    </div>

    <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus voluptate ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis repellendus accusantium saepe mollitia. Id, quos.</div>

  </div>

  <div class="last_request_container">

    <div class="last_request_title">

      last_request_title

    </div>

    <div class="last_request_photo">
      <div>
        <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg" alt="">
      </div>

    </div>

    <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus voluptate ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis repellendus accusantium saepe mollitia. Id, quos.</div>

  </div>

  <div class="last_request_container">

    <div class="last_request_title">

      last_request_title

    </div>

    <div class="last_request_photo">
      <div>
        <img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg" alt="">
      </div>

    </div>

    <div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus voluptate ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis repellendus accusantium saepe mollitia. Id, quos.</div>

  </div>





</div>

1
  • Все супер ! Хотел на flex делать, но пойдет . 👍
    – GRCR13
    27 янв в 18:44

Ваш ответ

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

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