见证块 / 可重复使用答案

【问题标题】：testimonial block / reusable见证块 / 可重复使用
【发布时间】：2017-03-17 06:04:53
【问题描述】：

我尝试使用左右文本图标创建推荐块，它将作为单独的块嵌入到标记中，也嵌入到滑块中。我使用基础网格 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{

}
}

【问题讨论】：

标签： html css wordpress responsive-design

【解决方案1】：

如果有人提供最好的解决方案，那就太好了。我使用弹性和改变结构。

<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

【讨论】：