CSS를 통해 valign을 대체합니다.

Question

나는 테이블 행에 내용을 배치하려고했습니다. 문제의 행에는 2 개의 다른 테이블과 1 개의 작은 미리보기 이미지가 포함됩니다 (당연히 테이블 셀 안에 있음). 행은 지금까지 valign="top"을 사용하여 배치되었습니다. 이것은 3 개의 모든 열의 내용을 맨 위로 가져 오는 데 효과적이었습니다.

그러나, 나는 썸네일 이미지이없는 경우이 셀 내용 잘 을 배치 CSS position:relative; vertical-align:text-top;

를 사용하여 위치를 원했다. 그러나 이미지가 포함되면 다른 열은 전혀 배치되지 않습니다. 아래 이미지를 참조하십시오.

alt text http://www.freeimagehosting.net/uploads/5164a2c796.jpg

^{* 겉만 번지르르 한 이미지 포맷에 대한 진심 죄송합니다.}

썸네일이 맨 위에 세로로 정렬되도록 두 테이블을 원합니다.

모든 여백과 여백은 0으로 설정되어 있으며 이미지의 크기는 실제 크기입니다.

누군가 내 브라우저 (Firefox)가 이러한 방식으로 작동하고이를 수정하는 이유를 알고 있습니까?

Answer 1

알았어! vertical-align:text-top은 상위 요소의 텍스트의 맨 위에 요소를 정렬하고 상위 요소의 맨 위에 정렬하지 않는 것 같습니다! vertical-align:top으로 변경하면 트릭을 마쳤습니다.