div сразу по div

131
29 апреля 2019, 18:00

Подскажите пожалуйста, есть 4 блока:

<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
1 
</div> 
<div style="width:200px;background:#777;height:100px;display:inline-block;"> 
2 
</div> 
<br><br> 
<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
3 
</div> 
<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
4 
</div>

Как сделать что бы четвертый блок был сразу под вторым а не на уровне третьего?

Answer 1

Порядок немного другой получается, но это решение подойдет если нужна динамическая высота. CSS Multi-column Layout

.grid { 
   columns: 2; 
   column-gap: 10px; 
} 
 
.block { 
   width: 200px; 
   background: #777; 
   height: 200px; 
   display: inline-block; 
   margin-bottom: 1em; 
} 
 
.block:nth-child(3) { 
    height: 100px; 
}
<div class="grid"> 
    <div class="block"> 
        1 
    </div> 
    <div class="block"> 
        2 
    </div> 
    <div class="block"> 
        3 
    </div> 
    <div class="block"> 
        4 
    </div> 
</div>

Answer 2

Можно сделать так (1 ПРИМЕР). Это конечно не самый лучший способ, но по другому у меня не получилось. Просто добавил к 4-ому div перемещение на 100px вверх.

Либо по-другому (2 ПРИМЕР). Там еще один div с display: grid;, в котором все остальные div. Плюс уменьшенные margin сверху чтобы ровно было. Тоже не очень удобно, но работает.

1 ПРИМЕР 
<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
  1 
</div> 
<div style="width:200px;background:#777;height:100px;display:inline-block;"> 
  2 
</div> 
<br><br> 
<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
  3 
</div> 
<div style="width:200px;background:#777;height:200px;display:inline-block; transform: translate(0px, -100px);"> 
  4 
</div> 
 
2 ПРИМЕР 
<div style="width: 450px; display: grid;"> 
	<div style="width:200px;background:#777;height:200px;display:inline-block;"> 
		1 
	</div> 
 
	<div style="width:200px;background:#777;height:100px;display:inline-block; margin-left: 210px; margin-top: -200px"> 
		2 
	</div> 
	<div style="width:200px;background:#777;height:200px;display:inline-block; margin-top: 10px;"> 
		3 
	</div> 
 
	<div style="width:200px;background:#777;height:200px;display:inline-block; margin-left: 210px; margin-top: -300px;"> 
		4 
	</div> 
</div>

READ ALSO
Эфект при наведение мышкой css
HTML

Эфект при наведение мышкой css

при наведение на ссылку она меняет свой цвет во так

 152
Как разделить регистрационную форму на 2 части
HTML

Как разделить регистрационную форму на 2 части

Есть большая регистрационная форма с более чем 20+ полямиИдея заключается в следующем, разделить ее на две формы, в 1 форму оставить обязательные...

 138
Скролл до элемента
HTML

Скролл до элемента

Как сделать так, чтобы срабатывало событие, когда элемент находится посередине экрана, как на этом сайте https://byjaktcom/contact/?

 127
Проблема с непрямоугольным блоком
HTML

Проблема с непрямоугольным блоком

Верстаю секцию с выбором прайсингов в данный момент по макету (скриншот приложил)Идея в том, что при наведении на каждый из блоков через mouseover/mouseout...

 140