Question

我正在尝试一个居中的双列布局，我希望右列中的水平规则一直延伸到浏览器视口的右边缘。这将要求这些元素比它们包含的父列更宽，但只在右侧。

以下是一个示例图片：

Example http://sans-concept.com/temp/layout.jpg

这是JSFiddle的一个快速模型，HR已经到位但尚未扩展到容器之外：

这让我很接近：

hr {
   position: absolute;
   left: 0;
   right: 0;
}

但它将HR扩展到整个页面而不仅仅是右侧。有什么想法吗？谢谢！

Answer 1

如果您确保整个创作都在具有属性的屏幕大小的div中溢出：隐藏; 然后你可以让它们无限长，最终用户不应该告诉你。

喜欢的东西宽度：500％; 应该做的。

http://jsfiddle.net/hx2YF/

这是一个小提琴。拖动结果窗口使其足够大以查看结果。

Answer 2

这里的困难在于，必须知道容器左边缘和视口右端的距离才能获得像素完美度。请参阅@ animuson（悲观）答案以获得佐证。我在这种情况下选择jQuery：

#container {        
    position: relative; /*hr will start at the left edge of the container*/
}
#container hr {
    left: 10px;
    position: absolute;
}

然后在jQuery中修补并运行此

$(document).ready(function() {
    // calculate the width        account for container padding vv
    var w = $(window).width() - $('#container').offset().left - 10;
    // apply the width
    $('#container hr').width(w);
});

DEMO

<强>更新

DEMO - 适应窗口重新调整大小。

Answer 3

绝对定位的元素无法同时知道其直接父元素的左侧和根元素的右侧。此外，通过使您的水平规则绝对定位，您将从文档流中删除它们，因此您的文本将在它们下面折叠。然后，您必须添加额外的填充等，以便将其推回。

由于您没有使用预定义的宽度位置，其中明确的所有内容都在页面上，因此没有任何方法可以实现这一目标。您可以使<hr>比其父级更大（例如），但它不会一直延伸到视口的边缘，而是完全针对每个屏幕大小（有些将超过创建水平滚动条））。

Answer 4

如果右列是透明的，您可以在body标签上使用背景图像，但这只有在规则在文档中具有固定位置时才有效（例如在标题中）。

Answer 5

我已为10创建了一个启动器，您可以view on JS Fiddle。

我使用了以下示例HTML和CSS

HTML

<div id="example">
    <h1>Example</h1>
    <p>Example text followed by a horizontal rule 
        example text followed by a horizontal rule
        example text followed by a horizontal rule.</p>
    <hr>
    <p>Example text followed by a horizontal rule 
        example text followed by a horizontal rule
        example text followed by a horizontal rule.</p>
    <hr>
</div>

CSS

#example {
    width: 50%;
    margin: 0 auto;
    background-color: #FCFCFC;    
}

#example hr {
    width: 150%;    
}

固定固定宽度

您可以使用固定的像素宽度获得相同的最终结果，但它更加繁琐。

我已将您的示例分为demonstrate this solution on JSFiddle。

根据您提供的HTML，CSS为：

body {
    overflow-x: hidden;   
}

.wrapper { /* Center the layout */
    width:800px;
    margin:0 auto;
}

.leftCol { /* Left column */
    width:200px;
    float:left;
    background-color:#ccc;
    margin:0;
}
.rightCol { /* Right column */
    width:600px;
    float:right;
    background-color:#dadada;
    margin:0;
}
hr {
    /* Make the HR extend to the
    right edge of the viewport,
    outside of .rightCol*/
    width: 200%;
}

@media only screen and (max-width: 800px) {
    body {
        overflow-x: auto;   
    }
    hr {
        width: 100%;
    }
}

请注意，此解决方案的最后一部分使用媒体查询在视口调整大小低于800px时重置值，因为此时您确实想要允许水平滚动条。媒体查询在某些旧版浏览器中不起作用，因此您需要在要支持的浏览器中对其进行测试。最糟糕的情况是您的用户无法在旧浏览器中水平滚动。

在一个方向上使子元素比父元素更宽

5 个答案: