Question

我正在尝试使用列之间的垂直规则制作3列（通过短代码）。我已经为每个列添加了一个border-right，并在我的最后一列添加了一个border-left，现在我尝试将div中的第二个第三列包装为一个分配了第二列右边框的类。我在下面列出了我的CSS和html，但无法弄清楚我做错了什么。您可以在此处查看该网站：www.bookemcreative.com/testsite

.one_third {
border-right: 1px solid #808080;
height: 120px;
padding-top: 30px;
margin-right: 3.8%;
}

.one_third.last {
border-left: 1px solid #808080;
border-right: none !important; }
}

#wrapper .noborder .one_third {
border-right: 0 !important;
}

<div class="noborder">[one_third last="no"]
<span style="font-size: 24px; font-style: italic; font-family: texgyrescholaitalic;">Browse our Pocket Cards
</span>
<p style="line-height: 1.4em;"><span style="font-size: 13px; font-family: Antic Slab;">Browse our Unique Line of Pocket Cards
starting at $.75 each.
<a href="http://bookemcreative.com/testsite/pocket-cards-2/">Learn More <i class="icon-play" style="font-size: 10px;"></i></a></span></p>
[/one_third]
</div>

Answer 1

您可以使用伪选择器选择元素。试试这个：

<强> HTML

<div class="one_third"></div>
<div class="one_third"></div>
<div class="one_third"></div>

<强> CSS

.one_third:nth-child(1){ 
   border-right: solid 1px #ccc;
}



.one_third:nth-child(3) {
   border-left: solid 1px #ccc;
}

<强> DEMO HERE

注意：删除类.noborder 注1：有很多方法可以做到这一点。这是其中之一

带边框的3列（垂直规则）

1 个答案: