Question

<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和浮动右侧一个，您将看到。我把我尝试过的解决方案留下了评论。

您应该从复制粘贴中获得完整的复制品。

Answer 1

我不相信没有使用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>

Answer 2

我（我认为可能是）一个类似的问题，我想右对齐一个画布元素，它比包含它的div宽。 div约为300px，canvas元素约为1000px。

使用float: right，画布右对齐，但div上的滚动条消失了。

我用jQuery使用scrollLeft()解决了这个问题，根据div和画布宽度设置初始滚动，类似于：

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

Answer 3

我遇到了这个问题。我通过使内部内容显示为：inline-block，然后使外部容器为text-align：right来解决了该问题。内部内容“浮动”在右边（就像是内联文本一样），但滚动条仍然保留。您必须重置内部内容的文本对齐方式，否则所有内容也将正确对齐。

如果您的内部内容不喜欢被内联代码阻止，那么您将被其他解决方案所困扰。

浮动右侧没有水平滚动条

3 个答案: