html - 试图在4个差异的中间放置一个分隔符

我正在尝试将分隔符元素直接放置在4格的中心，以某种方式，位置的百分比是指元素本身的宽度/高度，而不是其父容器中的位置。

Codepen：http://codepen.io/HendrikEng/pen/ObyLKG

HTML：

<section>
    <div class="c-connector-service"></div>
    <div class="c-service">
        <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
    </div>
</section>

CSS：

.c-service {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.c-service-item {
  width: 41.66667%;
  float: left;
}

.c-service-item {
  background: pink;
  min-height: 30.5em;
  text-align: center;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(even) {
  border-left: 1px solid #ebebeb;
  margin-left: -1px;
  border-bottom: 1px solid #ebebeb;
}

.c-connector-service {
  position: relative;
}

.c-connector-service::after {
  background: green;
  border-left: 1px solid white;
  border-top: 1px solid white;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
}

最佳答案

放下<div class="c-connector-service"></div>元素，给出c-service position: relative并在伪元素上使用与赋予c-service-item宽度相同的左值

.c-service {
  position: relative;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.c-service-item {
  width: 41.66667%;
  float: left;
  background: pink;
  min-height: 30.5em;
  text-align: center;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(odd) {
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.c-service-item:nth-of-type(even) {
  border-left: 1px solid #ebebeb;
  margin-left: -1px;
  border-bottom: 1px solid #ebebeb;
}
.c-service::after {
  background: green;
  border-left: 1px solid white;
  border-top: 1px solid white;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 41.66667%;
  top: 50%;
}

<section>
    <div class="c-service">
        <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
       <div class="c-service-item">
          loremipsum lalala
        </div>
    </div>
</section>

关于html - 试图在4个差异的中间放置一个分隔符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40497177/