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

我正在尝试制作3列（通过短代码），列之间有垂直规则。我已经在每一列的右边添加了一个边框，在最后一列的左边添加了一个边框，现在我正在尝试将第二列和第三列包装在一个div中，并指定一个类来隔离第二列的右边框。我在下面列出了我的CSS和html，但我不知道我做错了什么。您可以在此处查看该网站：www.bookemcreative.com/testsite

。三分之一{
右边框：1px实心#808080；
高度：120px；
填充顶部：30px；
保证金权利：3.8%；
}
.最后三分之一{
左边框：1px实心#808080；
右边框：无！重要；}
}
#包装纸。无订单。三分之一{
右边界：0！重要；
}

[one_third last=“no”]
浏览我们的袖珍卡片
浏览我们独特的袖珍卡系列
起价为每人0.75美元。

[三分之一]

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

HTML

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

注意：删除该类

---

注1：有很多方法可以做到这一点。这是其中之一

那么我该如何调整html以适应这种情况呢？我对复杂的divsI比较陌生，我已经制作了jsfiddle来表示您的html-。别忘了删除div.noborderOk，这似乎很有效，但是，它将最后一列推到了新行-我相信我必须调整边距，但不确定调整的百分比是多少？你必须给这个类一个相等的高度。三分之一。。i supose是高度：120px，所以这样做。三分之一{高度：120px；}。。请注意百分比和利润率…只需跟随我的演示即可。我补充道，但似乎仍在向下推最后一列-我需要调整利润率吗？非常感谢。我真的很感谢你的帮助。

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



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