0

我正在实现一个简单的带状标题，它延伸出内容区域（左右），显示带有图像背景的 3d 效果（没有 css3 技巧）。

我尝试了浮动、负边距和最后的相对定位，但我的问题是我尝试的所有解决方案都增加了内容的可滚动宽度（向右扩展）。我想保持我的功能区作为“背景效果”保持内容的可滚动宽度。

查看我的简化工作示例：http: //jsfiddle.net/c5cVG/16/

body {
    background: blue;
}

body>div {
    width: 200px;
    margin: 0 auto;
    background: white;
}

body>div>p {
    padding: 5px;
}

body>div>h2 {
    overflow: hidden;
    padding: 10px 20px 5px;
    background: red;
    width: 190px;
    left: -15px;
    position: relative; 
}

如果您将视口宽度设置为低于 215px，您可以看到红色“丝带”的左边缘延伸位于视口之外，并且无法使用水平 scollbar 在内部滚动。

我想在右边缘扩展（溢出白色区域）上获得相同的效果，但它会推动可滚动区域的右边缘并使其自身可滚动。

任何帮助或演示将不胜感激。

4

1 回答 1

0

好的，我在这个线程中找到了一个看起来不错的解决方案：https : //stackoverflow.com/a/2650215/2084434（Nikolaos Dimopoulos 的回答）

将整个内容包装在另一个 div 中并应用

#wrapper {
    width: 100%;
    overflow: hidden;
    min-width: 200px;
}

工作正常。这是更新的小提琴：http: //jsfiddle.net/jJaxp/2/

于 2013-02-19T08:13:48.563 回答