此代码使浏览器在内容大于窗口时有一个水平滚动条，向右溢出：
div.a {
position: relative;
float: left;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
left: 100%;
background-color: blue;
white-space: nowrap;
}
<div class="a">Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
但是，如果我使第一个 div 向右浮动，然后将第二个 div 置于其左侧，则浏览器不会创建水平滚动条，并且无法查看溢出的文本。
div.a {
position: relative;
float: right;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}
<div class="a">
Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
我可以以某种方式改变这种行为，以便在内容大于窗口并溢出到左侧时能够向左滚动吗？
在 FF 47、IE 11、Opera 38 上测试 - 都做同样的事情。
如果这种行为不能通过 html/css 改变，那么浏览器选择执行当前操作的原因是什么？有什么原因无法“修复”它们吗？对于仅适用于从右到左语言的网站来说，当前的行为是否也会出现问题，我认为这些网站希望能够使用这样的布局？
因为你有一个非常具体的例子，这样的东西对你有用吗？我确实需要使用一点jquery（你可以使用javascript 来完成）。如果您没有任何其他会受到影响的内容，您可以在 HTML 标记上放置一个 rtl 并保持元素上的绝对位置。
if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
$('html').css('direction', 'rtl');
}
else {
$('html').css('direction', 'ltr');
}
div.a
{
position: relative;
float: right;
background-color: red;
}
div.b
{
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
Text1
<div class="b" id="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
