Question

我想要实现的目标

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

我已经拥有的

见simple JsFiddle example。在Chrome 25和FireFox 19中进行了测试。

问题

现在，如果我减小窗口宽度以使蓝色和红色框超出可见区域，则会显示水平滚动条。但是，如果我在display: none;上设置div.right，则不会显示滚动条。

如何使用div.right获得所需的功能，以便如果蓝框和红框被窗框切断，水平滚动条会保持隐藏状态？对于这个有一个很好的，跨浏览器兼容的解决方案吗？

修改

在我的实际网站上，红色和蓝色框将包含一个图像，所以我也在考虑将bg图像切成两半的解决方案，并将较小的部分设置为内容div的background-image

Answer 1

您只能使用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;
}

Answer 2

请使用以下内容，我希望它能解决您的问题

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

试试这个解决方案

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

2 个答案: