2009-10-27 8 views
3
<html> 
<head> 
<style type="text/css" rel="stylesheet"> 
    * {margin:0;padding:0;} 

    div#box {background-color:green;width:1000px;} 

    /* #box {position:absolute;top:0;right:0;} */ 
    /* #box {position:absolute;top:0;left:0;} */ 
    /* #box {float:right;} */ 
    #box {float:left;} 

    .clearer {clear:both;} 
</style> 
</head> 
<body> 
    <div id="box"> 
     asdafdsf 
    </div> 
    <div class="clearer"></div> 
</body> 
</html> 

첫 번째 부동 소수점 왼쪽 ID의 주석을 풀고 오른쪽 플로트를 하나 누르면 주석이 표시됩니다. 나는 시도한 솔루션을 주석으로 남겼다.플로트 오른쪽에 수평 스크롤 막대 없음

복사하여 붙여 넣기에서 전체 repro 있어야합니다.

+1

사용하고있는 문서 타입 :

나는 유사한 DIV 캔버스 폭에 따라 초기 스크롤을 설정 scrollLeft()를 사용하여 jQuery를 함께이 문제를 해결? –

+0

하나를 지정하지 않았습니다. 나는 무엇을해야만 하는가? – jdelator

답변

2

자바 스크립트를 사용하지 않고이 문제를 해결할 방법이 없다고 생각합니다. 브라우저는 해당 페이지의 왼쪽 위 모서리를 기준으로 페이지를 렌더링하므로 해당 0,0 점의 왼쪽 위 또는 위에있는 모든 것이 효과적으로 화면에서 벗어납니다. 모든 오버플로가 맨 아래와 오른쪽에서 발생합니다. 이는 모든 블록 요소 내부의 내용과 동일한 방식입니다. 따라서 항목이 페이지의 오른쪽에 상대적으로 배치 된 경우 너비는 100 %입니다. 0,0 원점의 왼쪽 부분은 단순히 오프 스크린입니다.

누군가 나를 위해 나를 잘못 생각하는 것을 좋아합니다.

여기에 작동하는 자바 스크립트 솔루션입니다 :

내가 가진
<html> 
<head> 
<style type="text/css" rel="stylesheet"> 
    * {margin:0;padding:0;} 
    div#box {background-color:green;width:1000px;} 
    #box {position:absolute;top:0;left:0;} 
    .clearer {clear:both;} 
</style> 
</head> 
<body> 
    <div id="box"> 
     asdafdsf 
    </div> 
    <div class="clearer"></div> 
    <script type="text/javascript"> 
     function layout() { 
      if(typeof(window.innerWidth) == 'number') 
       this.screenWidth = window.innerWidth; 
      else //patch for IE 
       this.screenWidth = document.body.clientWidth; 
      this.el = document.getElementById('box') 
      if (this.el.offsetWidth > this.screenWidth) 
       window.scroll(this.el.offsetWidth,0); 
      else 
       this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px'; 
     } 
     function eventListener(el,action,func) { 
      if (el) { 
       if (el.addEventListener) 
        el.addEventListener(action, func, false); 
       else if (el.attachEvent) 
        el.attachEvent('on' + action, func); 
      } 
     } 
     eventListener(window,'resize',layout); 
     layout();   
    </script> 
</body> 
</html> 
0

(I있을 수 있습니다 생각) 내가 원했던 유사한 문제 오른쪽 정렬을 보유하고있는 DIV 후 넓은 캔버스 요소를. div는 약 300px이며 캔버스 요소는 약 1000px입니다.

float: right을 사용하면 캔버스가 오른쪽 정렬되지만 div의 스크롤 막대가 사라집니다.

$("#div").scrollLeft(canvas.width() - div.width())