Нужно, чтобы последняя статья ( белый блок ) находился под картинкой ( черный блок ), как сделать наиболее лаконичным способом?
HTML так же можно поменять, если разметка не правильная
body {
margin: 0;
background: #f0f0f0;
}
.wrapper {
display: flex;
margin: 20% 20%;
}
.img {
width: 300px;
height: 300px;
margin-right: 20px;
background: gray;
}
.item {
width: 300px;
height: 85px;
background: #fff;
margin-bottom: 20px;
}
<div class="wrapper">
<div class="img"></div>
<div class="articles">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
float
использовать, безflex
. Тогда будет то поведение по умолчанию которого вы хотите добиться. Либо посмотреть в сторону свойств семействаcolumns