Question

我使用<div>在body元素内定位了一个固定宽度float:right。当我调整窗口大小并且<div>的宽度低于窗口宽度时，不会出现滚动条。

HTML

<body>
   <div>Some text content inside.</div>
</body>

CSS

div{
   background : blue;
   width      : 400px;
   float      : right;
}

如果我将float:right更改为position:absolute; right:0;，则相同。

如果我添加body{overflow:auto;}，它仍然是相同的。

我的问题是：为什么会这样？我怎样才能改变它？

Answer 1

您永远不能向左滚动，而不是文档的左边缘（或者更靠近上边缘）。

然而，内容可以放在那里。

这就是正在发生的事情，你无法改变它。

您最接近的可能是在包含元素上设置最小宽度，以便内容永远不会位于左边或上边缘之外。

e.g。

body {
    position: relative;
    min-width: 300px;   
}

Answer 2

OP发表评论后更新：

然后你只需在div周围使用外框

<div id="outside">
   <div id="inside">
       Text
   </div>
</div>

和CSS：

#outside {
   max-width: 100%;
   overflow-x: auto;
   float: right;
}

#inside {
   background:blue;
   width: 300px;
}

更好？