如何折叠div的边界右边界面左边的div有单边界

Question

我的头衔可能并没有真正说明我想要实现的内容我真的不知道怎么把这个buti希望用一些解释你们会知道什么意思 我有一些浮动彼此相邻的div，我给所有div提供了1px的边框，并且意识到结果不是很好，因为在中间，右侧元素的左边界与右边界碰撞因此，左侧的元素使边框看起来所以我想要div div的右边的折叠边框，div b的边框左边有单边框，我尝试添加一个自定义css来删除中间div的边框但它看起来并不像我想要的那样，下面是我的代码任何帮助将是适用的

https://jsfiddle.net/c4nbs88e/2/

<div class="row">
<div class="col-md-3  groceries_right_mobile">

  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>

    </div>
  </a>

</div>
</div>

          .col-nopadding {
  padding: 0 !important;
}

.groceries_right_mobile {
  min-height: 400px;
  height: auto;
  background-color: #fff;
  display: block;
  width:600px;
  padding:20px !important;
}

.groceries_right_mobile a,
.groceries_right_mobile a:hover {
  color: #333;
}


.g_item_mobile {
  height: 150px;
  border: 1px solid #ddd;
  padding: 8px !important;
  background-color: #fff;
  width:150px;
  float: left;

}

.groceries_popular_title_mobile {
  height: 30px;
  width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: bold;
  float: left;
  margin: 0;
}

.-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groceries_popular_price_mobile {
  width: 100%;
  text-align: center;
  color: #ca2486;
  float: left;
  font-size: 13px;
  font-weight: bold;
}

.g_item_mobile_border{
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

Answer 1

您可以使用负边距在右侧和底侧吞下相等的边框大小或阴影。

• 您可以使用边框：margin-right:-1px;

＆＃13;

＆＃13;

.col-nopadding {
  padding: 0 !important;
}

.groceries_right_mobile {
  min-height: 400px;
  height: auto;
  background-color: #fff;
  display: block;
  width:600px;
  padding:20px !important;
}

.groceries_right_mobile a,
.groceries_right_mobile a:hover {
  color: #333;
}


.g_item_mobile {
  height: 150px;
  border: 1px solid #ddd;
  padding: 8px !important;
  background-color: #fff;
  width:150px;
  float: left;
  margin-right:-1px;
  margin-bottom:-1px;

}

.groceries_popular_title_mobile {
  height: 30px;
  width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: bold;
  float: left;
  margin: 0;
}

.-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groceries_popular_price_mobile {
  width: 100%;
  text-align: center;
  color: #ca2486;
  float: left;
  font-size: 13px;
  font-weight: bold;
}

＆＃13;

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="row">
<div class="col-md-3  groceries_right_mobile">
  
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;

• 或伪造带有阴影的边框会重叠在一旁的任何东西：box-shadow:0 0 0 1px #ddd;

＆＃13;

＆＃13;

.col-nopadding {
  padding: 0 !important;
}

.groceries_right_mobile {
  min-height: 400px;
  height: auto;
  background-color: #fff;
  display: block;
  width:600px;
  padding:20px !important;
}

.groceries_right_mobile a,
.groceries_right_mobile a:hover {
  color: #333;
}


.g_item_mobile {
  height: 150px;
  box-shadow:0 0 0 1px #ddd;
  padding: 8px !important;
  background-color: #fff;
  width:150px;
  float: left;

}

.groceries_popular_title_mobile {
  height: 30px;
  width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: bold;
  float: left;
  margin: 0;
}

.-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groceries_popular_price_mobile {
  width: 100%;
  text-align: center;
  color: #ca2486;
  float: left;
  font-size: 13px;
  font-weight: bold;
}

＆＃13;

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="row">
<div class="col-md-3  groceries_right_mobile">
  
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intsant Noddle buttered bread you will like
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile g_item_mobile_border">
      <p class="groceries_popular_title_mobile -ellipsis">Tecno - Spark k798 model
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
      
    </div>
  </a>
  <a href="">
    <div class="  g_item_mobile">
      <p class="groceries_popular_title_mobile -ellipsis">Intel-mobile-A45 castol
      </p>
      <span class="groceries_popular_price_mobile">₦ 200</span>
     
    </div>
  </a>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;