[英]Making my whole <div> clickable
我想使整個“主題” 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>';
}
?>
這可行!
現在唯一的問題是,因為我不能嵌套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>';
}
?>
嘗試在標記中包含div。
例如:
<a href="www.google.com">
<div></div>
</a>
在上面的示例中,您應該可以在div上的任意位置單擊,並且應該進入google頁面。
在HTML5中,允許將諸如div之類的塊內容放置在錨標記中。 這取決於您使用的HTML版本,因為它在HTML 4中不起作用。
您的代碼無法正常工作,因為您嵌套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>';
}
?>
請注意,我用class
替換了id
屬性,因為不能有多個具有相同ID的元素,因此在css / JS選擇器中,您需要將它們作為.topic { <style> }
而不是#topic { <style> }
(. .topicimg
)
編輯-如果要在圖標前顯示“反應” ,可以更改以下行:
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 '<span style="float:right; margin-top:15px;"> reacties <span style="color:grey;" class="fa fa-comment"></span></span>';
通過刪除float:right;
從內評論圖標跨度和包裝文本和單一圖標span
是浮動的權利
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.