
Я пытаюсь создать веб-сайт типа блога, где я получаю данные из базы данных, кажется, что все работает правильно, но когда я загружаю контентпроблема начинается всякий раз, когда верхний div встречает ссылку, нижележащий div нарушается.Так же, как изображение показано ниже.ссылка в синих также становится кликабельной в div ниже только
Пожалуйста, укажите на все, что не так в коде.и, пожалуйста, предложите любой другой метод, если он может быть достигнут.Вот представленный HTML-код на этом сайте, который я размещал: http://www.beyondtest.tk/
Вот код, который я использую
enter code here
$resultq = mysqli_query($conn,$result2);
while ($row = mysqli_fetch_array($resultq)) {
// upto here
echo '
<div class="row reviewbox ">
<div class="col-md-4 ">
<img src="/../admin/'.$row["2"].'" class="revimg img-fluid"/>
</div>
<div class="col-md-8" >
<div>
<a class ="title" href ="article.php?article_id='.base64_encode($row['0']).'"> ' .($row['1']) . ' </a>
</div>
<div class="author">
<small><i class="fas fa-calendar-alt">  '.($row[5]).'</i>   by </small> 
<small><i class="fas fa-user-alt"></i>  '.($row[4]).'</small> </br>
</div>
<div class="content">
'.truncate($row[3], 200).'
</div>
</div>
<div class="clearfix"></div>
</div>';
}
CSS:
.reviewbox{
margin: 15px;
background-color: white;
}
.revimg{
width: 384.6px;
height:200.8px;
z-index: 2;
margin-left:0;
overflow: hidden;}
small{
color:#778899;
}
.title,.title a:link{
font-size: 22px;
color:#373434;
text-decoration: none!important;
}
.author{
margin-top:5px;
}
.content{
margin-top:5px;
}