如何制作100%高度的列分隔线



好的,主要内容和侧边栏的基本设置,它们之间应该有细线。有没有办法在纯 css 中制作它?

<row>
<div span6>
<div span1 divider>
<div span5>
</row>

所以分隔线将是一条细线,它会有 100% 的高度?我知道我可以在 jquery 中设置高度或跳过它,但只是想知道......

我的意见 - 如果没有固定的高度(.row)用于使用左边框,则只有使用重复背景图像的可能性。(.row 中的一些点和重复 y

我也在寻找解决这个问题的方法。我需要一个可以用"列计数"实现的解决方案,并提出了以下内容。

我只是在容器中添加了一个背景(1px x 4px,尽管高度可以根据需要大或小(1px作品)。

我的容器代码(示例:)

<div class="column-two">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum tortor sit amet ultricies ornare. Integer eu interdum augue. Pellentesque quis semper neque. Duis enim nisl, posuere in sollicitudin id, euismod vel neque. Quisque id nisi cursus, laoreet ante ut, faucibus eros. Mauris orci massa, vestibulum at ante a, semper luctus nunc. Phasellus vel nisi condimentum, congue enim et, auctor elit. Vestibulum libero neque, aliquet eget dapibus quis, ullamcorper a orci.</p>
</div>

应用于我的容器的 CSS:

div.column-two {
-moz-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
background:url('images/div-2column.png') center top repeat-y;
}

这将创建 2 列显示,背景图像创建视觉垂直分隔。为我做诀窍!:)

代码

(我还添加了以下内容,以确保列的高度相等。以下内容删除了初始段落中的填充)

div.column-two p:first-of-type { margin-top:0; }

请注意,较旧的 IE 浏览器将回退到单列显示。使用"background:none"定位这些特定浏览器将确保背景不会显示在单列段落的中间。