CSS плавать правильно, а затем вверх? - PullRequest
Новая
       18

CSS плавать правильно, а затем вверх?

0 голосов
/ 24 апреля 2020

Я пытаюсь выяснить, есть ли какой-нибудь способ сделать sh плавание (левое или правое), чтобы каждый новый старт с границы начинался под элементом над ним. Это три элемента: 

#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}
div {
  float: right;
}
<div id="red-block">
  red-block
</div>
<div id="blue-block">
  blue-block
</div>
<div id="green-block">
  green-block
</div>

В этом случае зеленый блок начинается с правого конца после вертикального конца синего блока. Есть ли способ заставить его начинаться с нижней части красного блока?

Спасибо.

1 Ответ

0 голосов
/ 24 апреля 2020

попробуй flex.

HTML: 

<div id="main-block">
  <div id="blue-block">

  </div>

  <div>

    <div id="red-block">

    </div>
    <div id="green-block">

    </div>
  </div>

</div>

CSS: 

#main-block{
  display: flex;
  justify-content: flex-end;
}
#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#second-block{
  height: 30vh;
  width: 70vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}
...