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>

最初のfloatleftidとfloatrightidのコメントを外すと、表示されます。試したソリューションもコメントアウトしたままにしました。

コピーアンドペーストから完全な再現が必要です。

4

3 に答える 3

2

JavaScriptを使わずにこれを回避する方法はないと思います。ブラウザーは、そのページの左上隅を基準にしてページをレンダリングするため、その 0,0 ポイントより上または左にあるものは事実上画面外になります。すべてのオーバーフローは下と右に発生します。ブロック要素内のコンテンツと同じ方法です。そのため、アイテムがページの右側に相対的に配置されている場合、幅 100% よりも広くなります。0,0 原点の左側の部分は単に画面外になります。

誰かが私が間違っていることを証明してもらいたいのですが。

動作するJavaScriptソリューションは次のとおりです。

<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>
于 2009-10-27T23:35:40.563 に答える
0

それを保持する div よりも幅の広いキャンバス要素を右揃えにしたいという同様の問題がありました (私が思うかもしれません)。div は約 300px、canvas 要素は約 1000px です。

を使用するfloat: rightと、キャンバスは右揃えになりましたが、div のスクロールバーが消えました。

scrollLeft()次のように、div とキャンバスの幅に基づいて初期スクロールを設定するために jQuery を使用してこれを解決しました。

$("#div").scrollLeft(canvas.width() - div.width() )
于 2015-03-31T01:23:10.090 に答える