Я хочу сделать интерактивный div, а не только сам текст ..., как это сделать?tag a href 100% clickable
<div class="body">
<div class="div1"><a href="#" class="block bckgnd1"><span>See more comments</span></div></a><div class="div2 bckgnd2">2 of 18</div>
</div>
пример ... 
Я думаю, это то, что вы ищете. Что вам нужно, сделайте div1 и div2inline-block и дайте им width способом, который я предоставил. Как только это будет сделано, все, что вам нужно сделать, это сделать свой anchor элемент display: block так, чтобы он охватывал всю ширину div. Смотрите это ниже:
.div1 {
background-color: red;
height: 20px;
display: inline-block;
width: 83%;
}
.div2 {
background-color: green;
height: 20px;
display: inline-block;
width: 12%;
}
a.block {
display: block;
}<div class="body">
<div class="div1"><a href="#" class="block bckgnd1"><span>See more comments</span></div></a><div class="div2 bckgnd2">2 of 18</div>
</div>Wrap А вокруг дел.
<a href="url"><div>text</div></a>
Поместите <a> тег вокруг везде, где вы хотите кликабельны. В приведенном ниже коде тег <a> окружает весь div, который вы хотите использовать для клики.
<div class="body">
<a href="#" class="block bckgnd1"><div class="div1"><span>See more comments</span></div></a><div class="div2 bckgnd2">2 of 18</div>
</div>
Я принимаю ваш ответ, благодарность, хотя я видел на Facebook ... они используют для сНа поплавка: слева, а также сделать 100% кликабельными они не ограничивайте ширину CSS-стиля ... –
@ FábioZangirolami Ну, есть несколько способов получить этот конкретный макет. Вы можете использовать свойство display: inline-block' или 'float: left' /' float: right'. Это вопрос легкости и ремонтопригодности. Я думаю, что это легче понять и поддерживать. Я также должен упомянуть, что если вы используете 'floats', вам нужно будет использовать дополнительное свойство' clear', чтобы очистить 'floats'. –
obrigado, eu consegui o efeito desejado. http://jsfiddle.net/tvv3z33s/ –