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

时间:2012-05-05 16:44:12

标签: css

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

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我也在寻求解决这个问题的方法。我需要一个可以用“列数”实现的解决方案,并提出以下建议。

我只是添加了一个背景(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”定位这些特定浏览器将确保背景不会显示在单列段落的中间。