Я изучаю CSS, и я интегрировал шаблон дизайна (PSD).
Я застрял в небольшой вещи, где мне пришлось выровнять 4 столбца , 2 послева и 2 справа ...
Проблема в том, что 2 столбца справа должны быть немного вниз по левому 2 столбцу. ( см. Рисунок )
Изображение
Я искал решение. ... но я не нашел точно то, что искал.
Я много чего перепробовал (начальная загрузка, margin-top ... и т. д.), но я думаю, что естьболее логичное решение ... Можете ли вы помочь мне?
Заранее спасибо.
Мой код:
.our-approach {
height: fit-content;
height: -webkit-fill-available;
background-color: beige;
}
.our-approach-content {
max-width: 730px;
margin: auto;
}
.our-approach-content p {
border-radius: 10px;
}
.our-approach-content .col {
background-color: cadetblue;
padding: 20px;
border-radius: 10px;
margin: 10px;
}
<section class="our-approach">
<div class="container jumbotron">
<div class="tl-content our-approach-content">
<h1 class="text-center">Our Approach</h1>
<h2 class="text-center">How we do it</h2>
<div class="oac-legend">
<div class="oac-l">
<div class="row">
<div class="col"><p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
</p></div>
<div class="col"><p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
</p></div>
</div>
</div>
<div class="oac-r">
<div class="row">
<div class="col">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
</p></div>
<div class="col"><p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
</p></div>
</div>
</div>
</div>
</div>
</div>
</section>