1

我想要达到的目标

  • 我居中的文本内容后面有两个重叠的背景 div。
    • 文本内容 div 左下方的一个。
    • 一个在文本内容 div 的右上角。
    • 两者都应该稍微落后于文本内容。
    • 两者都应附加到文本 div。
  • 只有当窗口的宽度小于div.text' 的宽度时，水平滚动条才应该可见。
  • 因此，另外，如果两个背景 div 超出可见区域，它们不应该启用水平滚动条。

我已经拥有的

问题

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

我如何获得所需的功能div.right，以便如果蓝色和红色框被窗口框架切断，水平滚动条保持隐藏状态？有没有一个很好的、跨浏览器兼容的解决方案？

编辑

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

4

2 回答 2

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;
}
于 2013-03-29T10:21:41.267 回答
0

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

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

试试这个解决方案

于 2013-03-29T10:00:29.597 回答