컨테이너가 클릭 가능한 링크 여야하는 경우

Question

이 상황을 처리하는 가장 좋은 방법은 확실치 않습니다. 여기에 가상의 상황입니다 :

<a href="/my-page/"> 
    <div style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;"> 
     <div style="line-height: 50px; position: absolute; bottom: 0; left: 0;"> 
      <span>My Clickable Box</span> 
     </div> 
    </div> 
</a> 

그래서이 상황에서, 나는 실제 텍스트의 맨 아래에 위치한 다른 컨테이너와 컨테이너를 가지고 ...하지만 난 클릭으로 전체 박스가 필요합니다.

우리 모두가 알다시피, 앵커 태그는 특정 높이 또는 너비라고 말하면 잘되지 않습니다 ... 그래서 내부 내용에 거의 의존합니다.

나는 잘 모르겠다. 나는이 문제에 대해 약간의 상실감이있다.

Answer 1

디스플레이를 또는 inline-block으로 변경하면 크기를 조정할 수 있으며 divs를 사용할 필요가 없으며 그 중 일부는 유효하지 않습니다.

<a style="display:inline-block;width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;" href="/my-page/"> 
    <span>My Clickable Box</span> 
</a> 

Answer 2

클릭 할 수 있어야하는 div를 앵커 태그 안에 넣고 div에 크기를 설정할 수 있습니다. 그러면 전체 div가 클릭 할 수있게되어 링크 내부에 생깁니다.

Answer 3

div와 마찬가지로 앵커의 스타일을 지정한 다음 전체 영역을 클릭 할 수 있습니다. 예 : 그것은 주요 요소로 앵커를 사용하여 문제

<a href="/my-page/" style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative; line-height: 50px; position: absolute; bottom: 0; left: 0;">My Clickable Box