Расположение элементов в HTML

Question

Можно ли добиться этой структуры с помощью html + css?

Но вместо того, чтобы иметь вертикальное пространство между оранжевыми блоками, я хочу быть одним на вершине другого.

Я использовал flex и grid, но пока не очень успешно: (

jsfiddle:

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

Answer 1

Вы можете сделать это легко с помощью CSS сетки:

• вы можете использовать grid-template-columns: 3fr 2fr;, потому что у вас есть отношение 60% к 40% * big и small элементов,

• высота строк может быть установлена ​​с помощью grid-auto-rows: 100px,

• поле между строками можно установить с помощью свойства grid-row-gap,

• теперь установите big, чтобы всегда занимать первый столбец, используя grid-column: 1 и small, чтобы всегда занимать второй.

См. Демонстрацию ниже для конфигурации до настоящего времени:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

Теперь просто добавьте grid-auto-flow: dense, чтобы вытянуть оранжевые блоки наверх - см. Демонстрацию ниже:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

Answer 2

Если вы планируете использовать flex, я бы посоветовал вам разбить ваш контейнер на две колонки, что облегчает это.Это тестовый код, который я сделал, чтобы достичь этого.Надеюсь, это поможет вам.

HTML

<div class="d-flex flex-row">
  <div class="d-flex flex-column mr-1">
    <div class="big-box">
      BOX 1
    </div>
    <div class="big-box">
      BOX 2
    </div>
    <div class="big-box">
      BOX 3
    </div>
    <div class="big-box">
      BOX 4
    </div>
  </div>
  <div class="d-flex flex-column">
    <div class="small-box">
      BOX 5
    </div>
    <div class="small-box">
      BOX 6
    </div>
  </div>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/

Answer 3

Вы можете просто изменить это, изменив порядок вашего divs как

<div class="container">
    <div class="big"> I AM BIG 1</div>
    <div class="small"> I AM SMALL 1</div>
    <div class="big"> I AM BIG 2</div>
    <div class="small"> I AM SMALL 2 </div>
    <div class="big"> I AM BIG 3</div>
    <div class="big"> I AM BIG 4</div>  
</div>

Надеюсь, это то, что вы былиищу.

Answer 4

.main{
border: 1px solid red;
padding: 5px;
display:flex;
justify-content:space-between;
}
.left{
width:59.8%; 
}
.right{
width:39.8%;
position:relative;
display:block;
}
.right .orange-block:last-child{
  position:absolute;
  display:block;
  bottom:0;
  width: -webkit-fill-available;
}
.lime-block,.orange-block{
  margin-bottom:5px;
  height:80px;
  padding:5px;
}
.lime-block:last-child,.orange-block:last-child{
  margin-bottom:0px;
}
.lime-block{
  background:lime;
}
.orange-block{
  background:orange;
}

<body>
<div class="main">
<div class="left">
  <div class="lime-block">I AM BIG 1</div>
  <div class="lime-block">I AM BIG 2</div>
  <div class="lime-block">I AM BIG 3</div>
  <div class="lime-block">I AM BIG 4</div>
</div>
<div class="right">
  <div class="orange-block">I AM SMALL 1</div>
  <div class="orange-block">I AM SMALL 2</div>
</div>
</div>
</body>