为什么即使未应用边框底部也会出现？

Question

我使用浮标设置了一个包含 4 个方块的网格。在网格项目上，我在每个项目上应用了 border-top，在奇数项目上应用了 border-right。

但是由于某种原因，奇数块的底部有某种边框。

此行为的任何原因以及相同的任何修复？

补充说明：当我使用 flexbox 设置网格时，没有出现此问题。

Codepen Link: https://codepen.io/vikrantnegi007/full/NXKjOb/

.main-container6 {
  float: left;
  width: 100%;
}

.services-container {
  float: left;
  width: 50%;
  position: relative;
  border-top: 2px solid #fff;
}

.services-text-left {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #ffffff;
  background: rgba(109, 109, 109, .75);
  -webkit-transition: all .35s;
  transition: all .35s;
  z-index: 99;
  width: 100%;
}

.services-container img {
  display: block;
  width: 100%;
}

.services-text-in {
  padding: 60px;
}

.services-container:nth-child(2n+1) {
  border-right: 2px solid #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="main-container6">
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 1

因为您正在使用 box-sizing: border-box...添加 border-right 会影响图像的宽度，进而影响高度。

如果您将 border-right 添加到所有项目，则高度匹配，并且 div 对齐。

demo on codepen

Answer 2

出现这种效果是因为奇数容器即（2n+1）有边框，偶数容器即（2n）没有边框，你可以使用填充来解决这个问题。或者给每个容器加上边框

.services-container {
    border-right: 2px solid #fff;
}

Answer 3

只需将此 css 属性添加到 .services-container class,

.services-container {border-right: 2px solid transparent;}

为什么即使未应用边框底部也会出现？

Why is Border bottom appearing even when not applied?

html

css

border