horisontal 스크롤바가있는 동안 요소를 오른쪽으로 정렬

가로가 될 수 있고 가로 스크롤 막대가 발생할 수있는 요소가있는 동시에 요소가 오른쪽으로 정렬되기를 원하는 페이지가 있습니다. 예를 들어 :horisontal 스크롤바가있는 동안 요소를 오른쪽으로 정렬

<body> 
<div style="float:right">Stay right</div> 
<div style="white-space:nowrap; clear:both; font-size:2em"> 
    Wide child element which determines the width of the page. 
</div> 
</body>

넓은 요소가 브라우저 창에서 맞는 경우는 잘 작동합니다. 나는 "있을 권리"요소 스크롤바를 이동하는 경우

wrong right alignment

: 브라우저 창이 너무 작은 경우 수평 일광 스크롤 막대가 나타납니다 그러나 창으로 정렬됩니다 요소가 아닌 페이지 "권리를 유지"그래서 움직이고 실제로 아무것도 정렬하지 않습니다.

<body> 
<table width="100%"><tr><td> 
<div style="float:right">Stay right</div> 
<div style="white-space:nowrap; clear:both; font-size:2em"> 
    Wide child element which determines the width of the page. 
</div> 
</td></tr></table> 
</body>

요소가 브라우저 창 크기에 관계없이 폭 넓은 자식 요소의 오른쪽으로 정렬됩니다 "잘있어"하십시오 전체 페이지 주위에 테이블을 추가하는 경우

은 내가 wan't 무엇을합니까 .

편집 : 위 표 기반 솔루션 정렬한다 오른쪽 넓은 자식 요소 또는 윈도우 폭의 폭의 최대. 효과적으로 이것은 페이지의 내용 (즉, 넓은 하위 요소)에 의해 결정되는 "최소 폭"을 페이지에 제공합니다. 이것이 내가 원한 것입니다. 그것은 원문에서 분명하지 않습니다. 미안 해요.

전체 페이지를 테이블에 배치하는 것보다 더 좋은 방법이 있는지 궁금합니다.

출처

2012-08-16 Jakob Schou Jensen

절대로 전체 페이지를 테이블에 넣지 마십시오. 내가 생각하는 2000

당신이 당신의 div, 그것은 선까지 대신 페이지의 창 요소에 대한 fixed 위치에 원하는에 대한 년 이후 HTML을 망쳐 놨 :

.myDivThatFloatsRight { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
}

출처

2012-08-16 16:16:45 Hidde

이 솔루션이 문제를 해결하지 못함을 알 수 있습니다. myDivThatFloatsRight는 와이드 하위 요소의 너비를 고려하지 않습니다. –

을 그 매우 흥미로운 문제입니다. div에서 계산 된 너비가 텍스트 너비 대신 창 크기 (및 본문 크기)와 일치하기 때문에 실제로 발생합니다. 부동 텍스트는 렌더링 할 때 너비/높이에 대한 컨테이너를 찾습니다 (계산 된 값은 실제로는 창의 크기이기 때문에 float은 창의 가장자리에서 멈 춥니 다).

대부분의 사이트가 grid960/foundation/etc와 같은 것을 사용하고 최소/최대 너비가 제공되기 때문에 실제로는 자주 발생하지 않습니다. 너비를 설정하면 문제가 해결 될 것입니다.

동적 인 크기의 텍스트 (CSS 만 사용)에 대한 정말 좋은 해결책을 모르겠습니다 ... 테이블을 사용하지 않고 생각할 수있는 유일한 방법은 clearfix입니다. 실제로 플로팅 자식을 가진 요소에 사용/생성됩니다 (올바른 너비/높이를 지정하기 위해 플로팅 요소는 일반적으로 컨테이너 크기에 영향을주지 않음)하지만이 경우에도 작동합니다.

<body> 
    <div class="clearfix"> 
     <div style="float:right">Stay right</div> 
     <div style="white-space:nowrap; clear:both; font-size:2em"> 
      Wide child element which determines the width of the page. 
     </div> 
    </div> 
</body>

편집 : 나는 두 번째 (더 나은) 방법을 함께했다, 거짓말을하지만 좀 더 현대적인 브라우저를 필요로한다. display: inline-block 또는 display: table의 래퍼를 사용하는 것입니다.실제로는 clearfix의 서브 세트 일 뿐이며 IE8 이상 기반으로 도망 갈 수 있다면 작동 할 것입니다.

<body> 
    <div style="display:inline-block"> 
     <div style="float:right">Stay right</div> 
     <div style="white-space:nowrap; clear:both; font-size:2em"> 
      Wide child element which determines the width of the page. 
     </div> 
    </div> 
</body>

출처

2012-08-16 16:40:35 SciSpear

당신의 솔루션은 완벽합니다 - 둘 다 내가 요구 한 것을 수행합니다 - 그러나 내가 원하는 것은 아닙니다 ... 넓은 아이 또는 창 너비 중 가장 큰 것에 정렬하려면 "체재 권리"요소가 필요합니다. 이것은 질문에있는 원문이 말한 것이 아니었다. 죄송합니다! –

horisontal 스크롤바가있는 동안 요소를 오른쪽으로 정렬

답변

관련 문제