Turn набор дивы в ссылку

Question

У меня есть список элементов, как это:

<div class="outer"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

то, что я хочу, чтобы найти ссылку на всей внешней DIV, как если бы вы обернуть его (Но, к сожалению, ист не действительный)

Я знаю, что можно использовать «display: block» для тега «a» внутри div, чтобы получить его до полного размера div, но, к сожалению, размер divs зависит от (динамический) контент и поэтому не устанавливается через css. Это означает, что если я установил ширину и высоту для указанного тега «a» на 100%, тогда он примет размер родителя внешнего div.

Есть ли приемлемое решение?

Answer 1

следующее может работать:

<div class="outer"> 
    <a href="" class="spec_link"></a> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

и css:

.outer{ position:relative;} 

.outer .spec_link{ 
display:block; 
position:absolute; 
top:0; 
left:0; 
bottom:0; 
right:0; 
} 

ссылка будет обертываться вокруг внешнего, независимо от его размера. Я делаю что-то подобное для блоков с прозрачностью

Answer 2

Используя немного JavaScript вы можете достичь этого эффекта:

<div class="outer" style="cursor:pointer;" 
    onclick="document.location='somepage.html';"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

Answer 3

Вы можете обращаться по ссылке с Javascript:

<div class="outer" onclick="window.location.replace('yourlink.html');"> 
    <div>Head</div> 
    <div>Content</div> 
</div> 

Answer 4

Вы можете конвертировать div в span и установить их display:block

<a href="..." class="forced"> 
    <span class="outer"> 
     <span>Head</span> 
     <span>Content</span> 
    </span> 
</a> 

и использовать правило CSS из

.forced, .forced .outer, .forced .outer > span{ 
    display:block; 
} 

Answer 5

Не уверен, что если вы ищете для чистого решения css. Jquery позволяет связать событие щелчка:

jQuery('.outer').click(function() { 
    window.location = 'http://www.google.com/'; 
}); 

Answer 6

<a href="..."> 
<div> 
... 
</div> 
</a> 

действителен с HTML5.