html - 超链接与 div 重叠

Question

我正在尝试建立一个博客类型的网站，我正在从数据库中获取数据，一切似乎都正常工作，但是当我获取内容时，只要上面的 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">&nbsp '.($row[5]).'</i> &nbsp by </small>&nbsp
                      <small><i class="fas fa-user-alt"></i>&nbsp '.($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;

}

标签： htmlcssbootstrap-4

Answer 1

我想我发现了问题。我正在编辑我的答案。尽量不要用链接包装 col-md-4。我的意思是不要这样做：

<div class="row reviewbox ">
    <a href="https://www.theguardian.com/uk-news/2018/oct/29/uk-digital-services-tax-budget-facebook-google-amazon">
        <div class="col-md-4 ">
            <img src="/../admin/uploads/images.jpg" class="revimg img-fluid">
        </div>
    </a>
   (...)

尝试这样做：

<div class="row reviewbox ">
    <div class="col-md-4 ">
        <a href="https://www.theguardian.com/uk-news/2018/oct/29/uk-digital-services-tax-budget-facebook-google-amazon">
            <img src="/../admin/uploads/images.jpg" class="revimg img-fluid">
        </a>
    </div>

完整的代码应该是这样的（请注意我评论了 2 个空链接）：

<div class="row reviewbox ">
    <div class="col-md-4 ">
        <a href="https://www.theguardian.com/uk-news/2018/oct/29/uk-digital-services-tax-budget-facebook-google-amazon">
            <img src="/../admin/uploads/images.jpg" class="revimg img-fluid">
        </a>
    </div>
    <div class="col-md-8">
        <!-- <a href="https://www.theguardian.com/uk-news/2018/oct/29/uk-digital-services-tax-budget-facebook-google-amazon"></a> -->
        <div>
            <!-- <a href="https://www.theguardian.com/uk-news/2018/oct/29/uk-digital-services-tax-budget-facebook-google-amazon"></a> -->
            <a class="title" href="article.php?article_id=Mg=="> The Guardian view on Donald Trump: using hate as b</a>
        </div>
        <div class="author">
            <small><i class="fas fa-calendar-alt">&nbsp; 16:20:38</i> &nbsp; by </small>&nbsp;
            <small><i class="fas fa-user-alt"></i>&nbsp; Ashish</small> <br>
        </div>
        <div class="content">
            <p>It is in keeping with Theresa May’s style of government that a confidence vote on her leadership was
                provoked not by something she did but by something she did not do. Dither has been her...
            </p>
        </div>
    </div>
</div>

PS我可以确认，我做了一个测试，它有效。不要用链接包装 col-md-4。在 col-md-4 中执行此操作，只需使用所需链接包装图像。