我试图使3列(通过shortcode)与垂直规则之间的列之间。我在每列中都添加了border-right,在最后一列中添加了border-left,现在正尝试将div中的第二三分之一列包装到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>
您可以使用伪选择器选择元素。试试这个:
的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;
}
注意:删除类.noborder注意1:有很多方法可以执行此操作。这是其中之一
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句