当内容大于窗口时,此代码使浏览器具有水平滚动条,溢出到右侧：
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.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>
