[英]Making my whole <div> clickable
I want to make the whole "topic" div clickable. 我想使整个“主题” div可点击。 You can see the code down below.
您可以在下面查看代码。 I tried using
<a href="##"> </a>
before the first div but it will only make the picture clickable and not the whole div. 我尝试在第一个div之前使用
<a href="##"> </a>
,但是它只会使图片可点击,而不是整个div。
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<div id="topic">';
echo '<div id="topicimg">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '</div><div id="topictekst">';
echo '<b><a href="https://####/reactie"> '.$topic['topicnaam'].'</b></a>';
echo '<a> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</a>' ;
echo '<a style="float:right; margin-top:15px;"> reacties</a> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
echo '<hr><a><span class="badge bg-red">' . $board['topic'] . '</span></a>';
echo '</div></div>';
}
?>
This works! 这可行!
now the only problem is that because I cant nest the a
tag I am not abble to display the reacties
on the right because it was styled with a float: right
. 现在唯一的问题是,因为我不能嵌套
a
标签,我不abble显示reacties
右边,因为它是一个风格的float: right
。
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<a href="https://####/reactie"><div id="topic">';
echo '<div id="topicimg">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '</div><div id="topictekst">';
echo '<b> '.$topic['topicnaam'].'</b>';
echo ' - ' . $topic['voornaam'] . " " . $topic['achternaam'] ;
echo ' reacties <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
echo '</div></div></a>';
}
?>
Try to embrace your div in the a tag. 尝试在标记中包含div。
Examples are: 例如:
<a href="www.google.com">
<div></div>
</a>
In the above example, you should be able to click anywhere on your div and you should land on google's page. 在上面的示例中,您应该可以在div上的任意位置单击,并且应该进入google页面。
Well in HTML5 it is allowed to have a block content like div to be placed inside an anchor tag. 在HTML5中,允许将诸如div之类的块内容放置在锚标记中。 This depends on the HTML version your a using because it will not work in HTML 4.
这取决于您使用的HTML版本,因为它在HTML 4中不起作用。
Your code doesn't work because you have nested a
element, which is invalid HTML - This is how to do it: 您的代码无法正常工作,因为您嵌套
a
无效的HTML元素-这是这样做的方法:
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<a href="https://####/reactie"><div class="topic">';
echo '<div class="topicimg">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id'].'/'.$topic['foto'].'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '</div><div class="topictekst">';
echo '<b> '.$topic['topicnaam'].'</b>';
echo '<span> - ' . $topic['voornaam'] . " " . $topic['achternaam'] . '</span>' ;
echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
echo '<hr><span class="badge bg-red">' . $board['topic'] . '</span>';
echo '</div></div></a>';
}
?>
Note that I replaced the id
attributes with class
because you can't have multiple elements with the same ID, so in your css/JS selector you need to address those as .topic { <style> }
instead of #topic { <style> }
(Same goes for .topicimg
) 请注意,我用
class
替换了id
属性,因为不能有多个具有相同ID的元素,因此在css / JS选择器中,您需要将它们作为.topic { <style> }
而不是#topic { <style> }
(. .topicimg
)
edit - If you want to show the "reacties" before the icon you can change this line: 编辑-如果要在图标前显示“反应” ,可以更改以下行:
echo '<span style="float:right; margin-top:15px;"> reacties</span> <span style="float:right; color:grey; margin-top:15px"class="fa fa-comment"></span>';
With 用
echo '<span style="float:right; margin-top:15px;"> reacties <span style="color:grey;" class="fa fa-comment"></span></span>';
By removing float:right;
通过删除
float:right;
from the inner comment icon span and wrapping both the text and the icon in a single span
that is floating to the right 从内评论图标跨度和包装文本和单一图标
span
是浮动的权利
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.