테이블 기반 레이아웃에서 div align right 문제

레거시 웹 기반 CMS (테이블 기반 레이아웃 포함)에서 일부 변경해야합니다. 몇 가지 복잡한 중첩 테이블 안에있는 웹 사이트의 콘텐츠 영역을 변경할 수는 있지만 여기서는 1 개의 테이블 만 있다고 가정 할 수 있습니다.테이블 기반 레이아웃에서 div align right 문제

아래의 (단순화 된) 코드를 사용하면 IE6과 IE7의 맨 오른쪽에 ABC를 표시 할 수 있습니까?

<table> 
    <tr> 
    <td style="width:200px; border:solid 1px black;"> 
     <!-- can only make changes inside here --> 
     <div style="border:solid 1px red; text-align:right;">ABC</div> 
     <input style="width:300px;" value="DEF"> 
    </td> 
    </tr> 
</table>

<input> 태그는 표 셀의 미리 설정된 너비보다 긴 내용을 나타냅니다. IE8 또는 다른 최신 브라우저에서 div는 입력과 일치하도록 확장 될 수 있습니다. 그러나 IE6과 IE7에서는 CSS를 사용하여 200px 이상으로 확장하는 것처럼 보입니다. float, width, position relative 등을 사용해 보았습니다. 다시 한 번 200px 너비 선언을 제거하거나 테이블 구조를 변경하지 못했습니다.

누구든지이 작업을 수행하는 방법을 알고 있습니까? 고맙습니다. http://jsfiddle.net/kizu/AkVqS/

당신 경우 : 당신이 세포 내부의 구조를 변경할 수있는 경우는이 같은 내용을 확장 할 수 있도록

출처

2011-08-17 ananda

오른쪽으로 여백을 넣으시겠습니까? 나는 이것이 당신이 필요로하는 것이거나 IE6과 IE7이 그것으로 무엇을 할 것인지 확신하지 못한다 : http://jsfiddle.net/ambiguous/AfW4B/ –

margin-left : 170px (또는 어떤 px 값이든)과 같은 것을 시도 할 수있다. 필요한) 오른쪽으로 abc을 이동하는지 확인하십시오 – RSM

고마워요. 콘텐츠가 동적 인 너비를 가질 수 있음을 분명히하지 않았으므로 고정 여백을 사용하면 효과가 없습니다. – ananda

, 당신은 float:left (또는 right를, 또는 inline-block 임) div 모든 것을 포장 할 수 있습니다 input 부분을 래핑 할 수 없으므로 한 번만 실행되는 표현식을 사용할 수 있습니다 (따라서 성능 문제는 발생하지 않습니다). http://jsfiddle.net/AkVqS/2/

출처

2011-08-17 09:46:15 kizu

표현식을 사용하면 완벽하게 작동합니다. – ananda

테이블 기반 레이아웃에서 div align right 문제

답변

관련 문제