Css 如何制作100%高度的柱分隔器

Css 如何制作100%高度的柱分隔器,css,Css,好的,主要内容和边栏的基本设置,它们之间应该有一条细线。有没有一种用纯css制作的方法 <row> <div span6> <div span1 divider> <div span5> </row> 所以分隔线是一条细线,它有100%的高度?我知道我可以在jquery中设置高度,或者跳过它,但只是想知道…我的意见-如果没有固定的高度(即.row)来使用border left,那么只能使用重复的回溯图像。(在行中有一些点和重复-y

好的,主要内容和边栏的基本设置,它们之间应该有一条细线。有没有一种用纯css制作的方法

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


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

我的意见-如果没有固定的高度(即.row)来使用border left,那么只能使用重复的回溯图像。(在行中有一些点和重复-y)

我也在寻找解决方法。我需要一个可以通过“列计数”实现的解决方案,并提出了以下建议

我只是在容器中添加了一个背景(1px4px,尽管高度可以是你想要的大小(1px可以工作)

我的容器代码(示例:)

这将创建两列显示,背景图像将创建一个视觉垂直分隔。这把戏对我有用!:)

代码

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


请注意,较旧的IE浏览器将退回到单列显示。针对这些特定浏览器的“背景:没有”将确保背景不显示在你的单栏段落的中间。

在解决问题的相关部分(右边)没有什么?你试过了吗?从来没有听说过<代码> <代码>元素。另外,细线怎么能有100%的高度?这意味着什么?首先要制作正确的HTML,现在你拥有的不是HTML。希望是伪代码;)现在它只是divs,懒惰的拼写错误。我的意思是有三个div,中间的一个div的高度应该与最长的左栏或右栏的高度相等
<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>
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;
}
div.column-two p:first-of-type { margin-top:0; }