在 Columnizer jquery 中创建列规则答案

【问题标题】：Creating Column Rules in Columnizer jquery在 Columnizer jquery 中创建列规则
【发布时间】：2012-09-14 10:44:36
【问题描述】：

我有一些文本，columnizer 将其分类为 3 列。

<div id="press">
  <div class="wide">
  Placeholder=
</div>

分栏器脚本是这样的

$(function(){
  $('.dp-highlighter').addClass("dontsplit");
  $('li').addClass("dontsplit");
  $('.wide').columnize({width:250});
  $('.thin').columnize({width:200});
});

我的 CSS 是这样的；

.column p, .column h1{ padding: 15px; }
#press {
  text-align: justify;
  margin: 0px 100px; 
  width: 80%;
  color: white;
  font-family: courier, Times New, serif;
}
.wide, .thin { clear:both; }

如何在列之间显示一条类似于列规则功能的线？

【问题讨论】：

标签： jquery html css

【解决方案1】：

在应该列的块内创建一个额外的<div>直接：

<div class="wide">
    <div>
        Here goes your text
    </div>
<div>

并将规则作为 CSS 边框添加到此 <div>:

.column div {
     border-left: 1px solid black;
 }

直接给.column加边框是不行的，但是大部分情况下会阻止文本分栏。

【讨论】：

【解决方案2】：

您可以尝试在左侧或右侧使用边框：

.column{
    border-left: 1px solid #000;
}

【讨论】：