Это делается через CSS. Вариантов как это сделать множество.
Можно использовать Bootstrap (фреймворк).
Можно использовать CSS GRID
Можно написать на чистом CSS
В таком случае ваш PHP будет вот таким:
<?php $i=0;
while($i<count($news)){ ?>
<article>
<div id="img_div">
<img src="/images/<?php echo $news[$i]["image"];?>" >
<p><?php echo $news[$i]['intro_text']; ?></p>
</div>
</article>
<?php }
Например:
Вариант 1:
body {
margin: 10px;
}
img {
max-width: 100%;
margin: 0 auto;
}
article {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
width: 100%;
max-width: 25%;
display: inline-block;
margin: 20px 5px;
}
div#img_div {
margin: 0 auto;
display: table;
}
<div class="wrapper">
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=center" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=north" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=east" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=south" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=west" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
<article>
<div id="img_div">
<img src="https://picsum.photos/200/300/?random?gravity=center" title="Картинка с БД" >
<p>Произвольный текст с БД</p>
</div>
</article>
</div>
Вариант 2:
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Колонка 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Колонка 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Колонка 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Колонка 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>