flexbox项目中的白线不会消失

时间:2017-04-04 10:57:41

标签: html css image flexbox

Image

所以我的问题是我无法弄清楚如何摆脱图像中的这条白线。请有人至少告诉我为什么会这样。我试图摆脱它,但我没有成功。我试过检查元素,那里没有边框。它非常令人沮丧。 这是该元素的html(它是一个flex项)。

 <div class="section-packages-flex">

  <div class="section-packages-item">
    <div class="section-packages-image">
      <h3 class="package-heading"><span class="package-underline">Package 1</span> <br /><span class="orange">The Zebra</span></h3>
      <img class="img-responsive" alt="Package 1 - The Zebra Package" src="_images/package-2.png">
    </div>
    <div class="section-packages-content">
      <div class="section-package-content-full">

      </div>
      <div class="section-package-content-split">

      </div>
      <div class="section-package-content-split">

      </div>
    </div>

    <div class="section-packages-pricing orange-background">
      <h3>R 2500.00</h3>
    </div>
  </div>

这是css。 背景

.orange-background {
    background: rgba(245,123,32,1.00);
    background-color: rgba(245,123,32,1.00);
}

父容器:

.section-packages-flex {
    display: flex;
    display: -webkit-flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between; 
}

.section-packages-item {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.section-packages-pricing {
    width: 20%;
    color: rgba(255,255,255,1.00);
    display: flex;
    display: -webkit-flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: center;
    -webkit-justify-content: center;
    text-align: center;
    border-left: 1px solid rgba(88,88,88,0.00);
    border-top: 1px solid rgba(88,88,88,1.00);  
}

1 个答案:

答案 0 :(得分:-1)

我刚添加了一个负边距值来摆脱它。