如何折叠 div A 的边框右侧，使 div B 的边框左侧具有单个边框

Question

我的标题可能并没有真正说明我想要实现的目标，我真的不知道如何表达这个，但我希望通过一些解释你们会知道这意味着什么 我有一些div 彼此相邻浮动，我为所有div 提供了 1px 的边框，并意识到结果不是那么好，因为在中间，右侧元素的左边框与左侧元素的右边框发生冲突，因此使边框看起来如此，所以认为我想要一个折叠边框div A 的右侧，边框在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;

.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;
}

<!-- 
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>

• 或者用阴影假装边界，会重叠任何靠近的地方：box-shadow:0 0 0 1px #ddd;

.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;
}

<!-- 
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>