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;

}

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>

P.S。我可以确认，我进行了测试，并且可以正常工作。不要用链接包装col-md-4。在col-md-4内进行操作，只需将图像包装在所需的链接上即可。

超链接与div重叠

1 个答案: