CSS가 정확히 내 장점은 아니지만 Wikia의 이미지 스태킹 템플릿을 사용하여 "거의 동일한"파일 수를 줄이는 데 도움이됩니다. 모바일 게임과 관련있다.절대 위치 div가 상대 위치 div로 이동
본질적으로 내 엉망은 절대 위치에있는 div로 이미지 모음을 밀어 넣습니다. 각각의 이미지는 하나의 상대적 위치 지정 div에 들어갑니다. 부모는 폭과 높이가 설정되어있어, 아이는 올바르게 수평에 배치됩니다.
그러나 위쪽으로 설정되지 않은 하위 div : 0px는 예상대로 정렬되지 않습니다. (이것들은 주로 숫자와 같은 게임 캐릭터 앞에 렌더링되는 요소입니다.) top : 37px를 지정하면 40px 또는 35px로가는 불량 이미지로 끝날 수 있습니다 ... 부모 div 컨테이너의 크기가 변경됩니다. 정확한 위치 지정 (브라우저별로 다르다 - 같은 결과로 테스트 된 IE와 Firefox)을 지시한다 : 이것은 윈도우를 수평으로 리사이징함으로써 수행 될 수있다. 하단 : 0px 또한 부모 div의 바닥이 예상되는 위치에 정렬되지 않습니다. 그것은 같은 방식으로 변화하는 것처럼 보입니다.
부모의 너비/높이가 52/53px로 설정되어 있으므로 모양이 바뀌지 않을 것으로 예상됩니다. 모든 상단 : 0 픽셀로 정렬 된 이미지의 크기는 상위 div와 같습니다. 다른 이미지는 다양한 크기를 갖지만 모든 이미지는 부모와 잘 맞아야합니다.
왜 아이들이 움직이며 예상되는 행동을 성취합니까?
두려운 링크 카르마는 모든 관련 URL을 직접 삽입하지 못하게합니다. 대신 관련 코드 스 니펫 (snippets)이라고 생각하는 것과 함께 this paste에 넣었습니다.
<div style="position: relative; width: 52px; height: 53px; padding: 0; display:inline-block; vertical-align: middle;">
<div style="position: absolute; left: 0px; top: 0px; padding: 0;">
<!– img here goes in the top left –>
</div>
<div style="position: absolute; left: 0px; top: 40px; padding: 0;">
<!– img here does NOT go 40px from the top of the relative positioned div –>
</div>
</div>
편집 : 간단한에서
하지만, 난 아직 잘 모르겠어요하지만 몇 가지 더 HTML 덤비는, 나는 이상한 행동을 유발 무엇 참조 이유 또는 해결 방법
링크 된 코드에서 볼 수 있듯이 각 이미지는 앵커 안에 배치됩니다. 앵커가 감싸지 않으면 제대로 작동합니다. 내가 원하지 않더라도 앵커를 제거하는 방법을 모르겠다. 나는 그렇지 않다.
<div style="position: relative; width: 52px; height: 53px; padding: 0; display:inline-block; vertical-align: middle;">
<div style="position: absolute; left: 39px; top: 34px; padding: 0;">
<a href="somewhere">
<img> <!– img here moves based on window size –>
</a>
</div>
<div style="position: absolute; left: 30px; top: 34px; padding: 0;">
<img> <!– img here positions correctly –>
</div>
</div>