Гиперссылки перекрываются с div - PullRequest
0 голосов
/ 17 декабря 2018

overlapped hyperlink

Я пытаюсь создать веб-сайт типа блога, где я получаю данные из базы данных, кажется, что все работает правильно, но когда я загружаю контентпроблема начинается всякий раз, когда верхний 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;

}

1 Ответ

0 голосов
/ 17 декабря 2018

Думаю, я нашел проблему.Я редактирую свой ответ.Старайтесь не оборачивать 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, просто оберните изображение нужной ссылкой.

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...