디스플레이로 div를주는 방법 : 표 셀의 백분율 높이?

Question

이제 카드 게임을하고 있는데 이제는 핸드 카드에 관한 코드를 작성하고 있습니다.
우리의 목표는 같아야합니다 (그리고 IE10에서 내 코드 '결과의) 세 가지 요구 사항이 있습니다

:
1. 모든 카드를 손에 카드 영역을 채울가.
2. 모든 카드의 너비가 같습니다.
3. 카드가 너무 많으면 오른쪽에있는 카드가 왼쪽에 있습니다. (파란색 테두리가있는 카드가 가장 왼쪽에 있으며, 두 번째 카드 아래에 있습니다.)
그래서 테이블을 사용하기로했습니다. 여기에 코드가 있습니다.

<style> 
    .hand { 
     position: absolute; /* We need to locate it */ 
     display: table; 
     width: 60%; 
     height: 15%; 
     left: 19.5%; 
    } 
     .hand .wrap { 
      position: relative; 
      display: table-cell; 
      height: 100%; 
     } 
     .hand .card { 
      position: relative; 
      left: 50%; 
     } 
</style> 
<div style="width: 400px; height:100px; position: relative"> 
<!-- Container's width and height will change with JavaScript --> 
    <div class="hand"> 
     <div class="wrap"> 
      <img class="card" src=""/> 
     </div> 
     <div class="wrap"> 
      <img class="card" src=""/> 
     </div> 
     <!-- More cards can be added using JavaScript. --> 
    </div> 
</div> 
<script> 
    function adjust() { // Run this function when inserting new cards. 
     $(".hand .card").css("margin-left", function() { 
      return 0 - $(this).width()/2 + "px"; 
     }); 
    } 
</script> 

이제 코드 'IE10의 결과는, 상기에 있지만 파이어 폭스와 크롬의 .hand의 높이 .card의 이미지의 높이와 동일하다.
는 좀 다른 유사한 질문을 읽은 지금은 해결책이 아니 효과, 그리고 동료 하나가 position: absolute;으로 .card을 설정하는 않는 테이블에 CSS height 속성을 알고 있지만, 그것은 단지 .card의 현재 IE10에서, 크롬에서 작동 폭이 0px이고 높이가 Firefox 인 경우 모두 .hand의 중심에 있습니다.
높이 또는 다른 방법으로 설정하는 크로스 브라우저 솔루션이 있습니까?
대단히 감사합니다!

Answer 1

position을 표 셀 (또는 하나처럼 동작하는 요소)에 적용 할 수 없기 때문에 구현이 작동하지 않습니다. 이것을 허용하려면 추가 마크 업 요소가 필요합니다.

근무 샘플은, 어떤 자바 스크립트없이, 모든 현대적인 브라우저에서 작동해야합니다 http://jsfiddle.net/VN3wx/

CSS

#hand { 
    display:table; 
    width:550px; 
    height:210px; 
} 
.card { 
    display:table-cell; 
} 
.card > div { 
    position:absolute; 
} 
.card img { 
    height:210px; 
    width:150px; 
} 

코드는 그림 목적의 다소 물론 청소기 그러나이 될 수