为什么右侧的div启用水平滚动条？

我要实现我的背后居中文本内容为什么右侧的div启用水平滚动条？

两个重叠的背景div的是什么。
- 一个在文本内容div的左下角。
- 一个在文本内容div的右上角。
- 两者都应该稍微落后于文字内容。
- 两者都应附加到文本div。
水平滚动条只有在窗口宽度小于div.text的宽度时才可见。
另外，如果两个背景div超出可见区域，则不应启用水平滚动条。

我已经有

看到这个simple JsFiddle example。在Chrome 25和Firefox 19

问题

测试了现在，如果我缩小窗口的宽度，使蓝色和红色盒送的可见区域外，则显示水平滚动条。但是，如果我在div.right上设置display: none;，则不显示滚动条。

我该如何使用div.right获得所需的功能，如果蓝框和红框被窗框遮挡，水平滚动条会保持隐藏状态？有没有一个很好的，跨浏览器兼容的解决方案？

编辑

在我的实际网站，红色和蓝色的框将包含一个图像，所以我也在考虑类似削减一半的BG-图像，并设置更小的部分作为background-image解决方案为内容div。

来源

2013-03-29 Daniel Szalay

这是我不清楚你想达到什么样的，你能与一些子弹可能是构建你的问题指出实际要求？另外，我有一种强烈的感觉，这应该是纯粹的CSS可能，但这只是一种基于我在你的jsfiddle中看到的直觉。 – Bazzz

@Bazzz按照建议编辑我的问题。 –

只能与CSS做到这一点，利用CSS3 Calc和身体设置为position: relative。

现场演示：http://jsfiddle.net/AMC93/

HTML

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 
<div class="text">Lorem ipsum dolor sit amet, etc</div>

CSS

html, body { 
    padding: 0; 
    margin: 0; 
    position: relative; 
} 
.wrapper { 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.right { 
    margin: 0 auto; 
    position:absolute; 
    background-color: red; 
    width: 100px; 
    height: 100px; 
    z-index: -1; 
    top: 0; 
    right: calc(50% - 230px); 
} 
.left { 
    margin: 0 auto; 
    position:absolute; 
    background-color: blue; 
    width: 100px; 
    height: 100px; 
    z-index: -2; 
    left: calc(50% - 230px); 
    bottom: 0; 
} 
.text { 
    width: 300px; 
    min-height: 500px; 
    height: auto; 
    z-index: 800; 
    text-align: justify; 
    margin: 0 auto; 
    overflow-x: auto; 
}

来源

2013-03-29 10:21:41

谢谢！对我而言，这只适用于Chrome。有没有办法以跨浏览器的方式做到这一点？ +1让我知道CSS calc！ –

firefox需要供应商前缀'-moz-calc' – david

@david不一定，不再是：https://developer.mozilla.org/en-US/docs/CSS/calc?redirectlocale=en-US&redirectslug=CSS%2F -moz-calc＃Browser_compatibility（自Firefox 16以来） –

请使用下面的，我希望它解决你的问题

$('.left').css('left', 0); 
$('.right').css('right', 0);

尝试这种解决方案

来源

2013-03-29 10:00:29 AmGates

感谢您的回答，但我不明白这将如何做所需的功能。 –

为什么右侧的div启用水平滚动条？

回答

相关问题