Question

有没有办法添加一条与浮动列高度相同的行，旁边使用：before。

我试过这样但是它跨越边界并没有跨越整个柱子的高度。

HTML

 <div class="col-xs-12">
   <a href="#"><img src="../img/spv/more-ideas/more-ideas3.jpg" / alt=""></a>
       <div class="product-details">
           <a href="#">Outfit ansehen &raquo;</a>
      </div>
 </div>

CSS

.col-xs-12{
    float: left;
    position:relative;
 }

.col-xs-12:before{
    content:"";
    display:block;
    height:100%;
    border-left:1px solid #ccc;
    position:absolute;
}

Answer 1

不要对身高未指定的父级使用高度100%，而是在绝对定位时使用top和bottom值：

.col-xs-12{
    float: left;
    position:relative;
 }

.col-xs-12:before{
      content:"";
      display:block;
      top:0;
      bottom:0;
      border-left:1px solid #ccc;
      position:absolute;
}

但是，如上所述，您应该避免“扩展”默认的引导类。将另一个类添加到列中并使用它。顺便提一下，如果您只是使用它来应用边界 - 为什么不简单地在列本身上这样做？

添加与浮动列相同高度的行：before

1 个答案: