0

введите сюда описание изображенияМне нужно сделать 4 квадрата слева и прямоугольник справа, с квадратами я разобрался, а вот прямоугольник не получается

*{
    margin: 0;
}
.tools{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;

}
.block{
    text-align: center;
    width:600px;
    height: 450px;
    background: darkgrey;
    color:red;
    border: 2px solid black;
    margin: 7px 7px 7px 7px;
}
.tools1{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;

}



<div class="tools">
    <div class="block">1</div>
    <div class="block">2</div>
</div>
<div class="tools1">
    <div class="block">3</div>
    <div class="block">4</div>
</div>
5
  • вариант с гридами не рассматриваете?)
    – qwerty
    11 ноя 2022 в 11:32
  • рассматриваю, только я не знаю, как это сделать
    – Lanth
    11 ноя 2022 в 11:39
  • у меня получилось, только через float, но без адаптации, а мне нужно с адаптацией
    – Lanth
    11 ноя 2022 в 11:40
  • а как перекладываться должно в адаптиве?
    – qwerty
    11 ноя 2022 в 11:42
  • как через bootstrap, квадраты , в которых будут графики начиная с первого выстраиваются вниз по очереди, а статисктика в прямоугольнике, должна быть самая первая вверху
    – Lanth
    11 ноя 2022 в 11:46

1 ответ 1

0

<style>
*{
    margin: 0;
}
body {
  
}
.tools{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;
    width: 250px;

}
.block{
    text-align: center;
    width: 100px;
    height: 80px;
    background: darkgrey;
    color:red;
    border: 2px solid black;
    margin: 7px 7px 7px 7px;
}
.tools1{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;
    width: 250px;
}

.right {
  height: auto;
  width: 100px;
  margin-left: 0;
}

.main {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.left {
  width: auto;
}
</style>


<div class="main">
  <div class="left">
    <div class="tools">
        <div class="block">1</div>
        <div class="block">2</div>
    </div>
    <div class="tools1">
        <div class="block">3</div>
        <div class="block">4</div>
    </div>
  </div>
  
  <div class="right block">RIGHT_BLOCK</div>
</div>

Ваш ответ

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

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