Question

我尝试使用左右文本图标创建推荐块，将嵌入标记作为单独的块和滑块。我使用基础网格6，但此元素将与Visual Composer一起使用在WP上。如何使这个块响应和可重用，因为一些变体应该带有徽标（开/关），链接 - 开/关。图标应位于span标记上，而不是：after或：before。指向Codepen

的链接

<div class="vc-testimonial text-center">
  <div class="vc-testimonial-logo"><img src="../images/shavlik-logo.png"></div>
  <div class="vc-testimonial-text">
    <h5><span class="icon icon-globe-half"></span><span class="icon icon-globe-half"></span>“60% of organizations that have used Office 365 have found it to be financially beneficial to their organizations”<span class="icon icon-globe-half icon-rotate"></span><span class="icon icon-globe-half icon-rotate"></span></h5>
  </div>
  <div class="vc-testimonial-link"><a class="primary small">Read full story</a></div>
  <div class="vc-testimonial-athor">
    <p>Uģis Peiko, IT speciālists</p>
  </div>
</div>


.vc-testimonial{
  max-width: 75em;
  // margin-left: auto;
  // margin-right: auto;
  padding: rem-calc(60 0);
  &-logo{
    img{
     width: auto;
    }

   }
 &-logo + &-text{
  margin-top: 20px;
  }
 &-text{
   h5 + span {
  // padding-left: rem-calc(55);
  // margin-right: rem-calc(55);
}
span + h5 {
  // padding-left: rem-calc(55);
  // margin-right: rem-calc(55);
  }
}
 &-text + &-link,   &-text + &-athor{
   margin-top: rem-calc(20);
 }

 &-link{

 }
 &-link + &-athor{
  margin-top: rem-calc(20);
 }
 &-athor{

}
}

Answer 1

如果有人提供最好的解决方案，那就太棒了。我使用flex和change结构。

<div class="vc-testimonial text-center">
  <div class="vc-testimonial-logo"><img src="../images/shavlik-logo.png"></div>
  <div class="vc-testimonial-text">
    <div class="vc-testimonial-text--icon"><span class="icon icon-globe-half">$</span><span class="icon icon-globe-half">$</span></div>
    <h5>“60% of organizations that have used Office 365 have found it to be financially beneficial to their organizations”</h5>
    <div class="vc-testimonial-text--icon"><span class="icon icon-globe-half icon-rotate">$</span><span class="icon icon-globe-half icon-rotate">$</span></div>
  </div>
  <div class="vc-testimonial-link"><a class="primary small">Read full story</a></div>
  <div class="vc-testimonial-athor">
    <p><em>Uģis Peiko, IT speciālists</em></p>
  </div>
</div>

这里的css Codepen

证言阻止/可重复使用

1 个答案: