Гиперссылки перекрываются с div
Я пытаюсь создать веб-сайт типа блога, на котором я извлекаю данные из базы данных, все работает правильно, но когда я получаю контент
проблема начинается всякий раз, когда верхний блок div встречает ссылку, которая нарушается в приведенном ниже блоке. То же, что и на изображении ниже. ссылка, выделенная синим цветом, также становится активной в блоке ниже just
Пожалуйста, укажите на все ошибки в коде. и, пожалуйста, предложите любой другой метод, если он может быть достигнут.
Вот визуализированный 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;
}
@jimmyLi добавил изображение, скажите мне, могу ли я добавить еще что-нибудь, чтобы определить проблему
@Ashish изображение - это не то же самое, что визуализированный HTML. Мы не можем видеть, находятся ли классы и т. д. Там, где они должны быть.
Лучшее, что вы можете сделать, - это создать MVCE. Вы получите дополнительную помощь, если другие не должны 1) догадаются, что может происходить, потому что нет рабочего примера (или отсутствует информация) и / или 2) сами соберут все фрагменты кода.
@hungerstar, вы можете посмотреть здесь Beyondtest.tk Я разместил его здесь, надеюсь, это поможет.
Ответы 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"> 16:20:38</i> by </small>
<small><i class = "fas fa-user-alt"></i> 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, просто оберните изображение нужной ссылкой.
обязательно попробую это, не могли бы вы рассказать мне, что означает вывод моего кода в формате html? на самом деле я новичок в веб-разработке, изображение не относится к тому же
Ваш вывод php. :)
я добавил изображение, разве оно не видно? что актуальная проблема перекрытия
Пробел вокруг атрибута и его значения не имеет значения, jsfiddle.net/5gjvL4qu/1.
@NunoBentes, вы можете посмотреть здесь Beyondtest.tk Я разместил его здесь, надеюсь, это поможет.
@Ashish Пожалуйста, взгляните на мой ответ. :)
обязательно посмотрю в этом нуно, спасибо за помощь
Надеюсь, я смогу вам помочь !! :)
@NunoBentes Одна вещь, которую я обнаружил, - это то, что я отображаю (эхо) абзац из базы данных и обрезаю его после 200 слов, см. Это '.truncate ($ row [3], 200) ». используя функцию, и там, если он встречает ссылку, он переходит в следующий div, в противном случае он работает нормально, как в первом или втором div.
Да, но проблема, с которой вы столкнулись, вызвана ссылкой на .col-md-4. Тогда весь ваш код в порядке !!!
возможно, я не могу объяснить проблему, весь код внутри окна просмотра div создается с использованием PHP, поэтому я не могу его контролировать, единственное, что я могу сделать, это сохранить текст в базе данных, которая не содержит никаких ссылок. на самом деле я действительно не хочу никаких ссылок внутри этого Revimg Div
Аааа !! Окок, я понял. Итак, да, я определил причину проблемы ... так что, если вы удалите любую ссылку из текста, у вас точно больше не будет этой проблемы !! :)
не могли бы вы опубликовать полученный html, а не php, чтобы лучше понять результат?