저는 웹 사이트에서 일하고 있습니다 - 내 포트폴리오. 메인 페이지에는 이미지 격자가 있습니다. 각 이미지는 해당 프로젝트의 페이지에 대한 링크입니다.플로팅 요소 아래에 절대 div 표시
이제 내 문제는 마우스를 움직이는 설명 텍스트입니다. 짧은 설명은 사용자가 이미지 위에 놓을 때 이미지 아래에 표시하고 싶습니다.
JSFiddle : http://jsfiddle.net/6crL7df7/
오전 데 문제는 내가 설명은 이미지 아래에 직접 표시 얻을 수있는 방법이다. 프로토 타입에서는 수동으로 bottom: -50px;
을 설정했지만 다른 양의 텍스트에 맞게 조정해야합니다. div의 상단은 (는) 하단의 이미지 하단과 자동 정렬됩니다. bottom: 0;
이 작동한다는 답변을 보았지만 나에게 도움이되지 못했습니다.
이미지 자체는 float: left;
이고 설명은 position: absolute;
입니다. 둘 다 포함하는 div는 float: left;
및 position: relative;
입니다.
이 기능을 사용하기 위해 기꺼이 제안을 드리겠습니다. W3C에서
흠, 어쩌면 사양을 읽었어야했는데 ... 쉬웠다. 'top : 100 %'내가 필요한 것을 정확하게 수행한다. – baum