浮动右侧没有水平滚动条

发布于 2024-08-09 07:17:55 字数 613 浏览 9 评论 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;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 和右浮动 id 的注释，您就会看到。我也将我尝试过的解决方案注释掉。

您应该通过复制和粘贴获得完整的重现。

原文

<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>

Uncomment the first float left id with the float right one and you will see. I left my tried solutions commented out as well.

You should have a full repro from a copy and paste.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沩ん囻菔务 2024-08-16 07:17:55

我认为不使用 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>

I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.

I'd love for someone to prove me wrong though.

Here's a javascript solution that works:

<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 原文

薄凉少年不暖心 2024-08-16 07:17:55

我遇到了（我认为可能是）类似的问题，我想右对齐比容纳它的 div 更宽的画布元素。 div 约为 300px，canvas 元素约为 1000px。

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

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

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

I had (what I think may be) a similar issue where I wanted to right-align a canvas element that is wider then the div that holds it. The div is about 300px, the canvas element about 1000px.

Using float: right, the canvas was right aligned but the scrollbars on the div disappeared.

I solved this with jQuery using scrollLeft() to set the initial scroll based on the div and canvas widths, similar to:

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

回复收藏 0 原文

南薇 2024-08-16 07:17:55

我遇到了这个问题。我通过使内部内容显示：内联块，然后使外部容器文本对齐：右来解决它。内部内容向右“浮动”（就好像它是内联文本），但滚动条仍然保留。您必须重置内部内容的文本对齐，否则其所有内容也会正确对齐。

如果您的内部内容不喜欢内联块，那么您将不得不采用其他解决方案。

回复收藏 0 原文

~没有更多了~

关于作者

请你别敷衍

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

浮动右侧没有水平滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

浮动右侧没有水平滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。