Używam sieci CSS. Mam wymóg posiadania pionowego separatora między dwoma divami. Jednak separator pionowy musi być mniejszy niż wysokość rzeczywistych divów, więc nie wierzę, że mogę użyć granicy Div.

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: 750px 21px 550px;
  margin: auto;
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
}

.divider {
  content: '';
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-left: 1px solid black;
}
<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="divider"></div>
    <div class="block">test</div>
  </div>
</div>

To działa i jestem w stanie użyć margin-top i margin-bottom, aby kontrolować wysokość rozdzielacza.

Idealnie wolę, że ten dzielnik jest elementem CSS Pseudo, ale nie mogę w żaden sposób pracować. Czy to możliwe, aby osiągnąć pożądany wynik lub muszę trzymać się rzeczywistego elementu w kodzie HTML.

1
John Steed 20 luty 2019, 19:58

2 odpowiedzi

Najlepsza odpowiedź

Usuń Element Divider Element i wykonaj content:after swój rozdzielacz przez dodanie grid-column: 2 i grid-row: 1 do tego pseudo elementu > (wymusza go do średnią kolumnę).

Zobacz demo poniżej:

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: 750px 21px 550px;
  margin: auto;
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
}

.content:after { /* Now a pseudo element */
  content: '';
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-left: 1px solid black;
  grid-column: 2; /* ADDED */
  grid-row: 1; /* ADDED */
}
<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="block">test</div>
  </div>
</div>

Jeśli chcesz rozdzielacz po każdy block, możesz mieć grid-gap między każdym block i umieść absolutnie a absolutnie Umieść pseudo Element w tej przestrzeni - patrz Demo poniżej:

.content-container {
  display: grid;
  width: 100%;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: repeat(3, 150px); /* CHANGED */
  margin: auto;
  grid-gap: 20px; /* ADDED */
}

.block {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
  position: relative; /* ADDED */
}

.block:after { /* ADDED */
  content: '';
  position: absolute;
  border-left: 1px solid black;
  right: -10px; /* adjust this */
  height: 80%; /* adjust this */
}

.block:last-child:after { /* ADDED */
  display: none; /* Hide the divider for the last block */
}
<div class="content-container">
  <div class="content">
    <div class="block">test</div>
    <div class="block">test</div>
    <div class="block">test</div>
  </div>
</div>
3
kukkuz 21 luty 2019, 02:32

Jednym ze sposobów na to

.content-container{
  display: grid;
  width: 100%;
  text-align: center;

}

.content{
  display: grid;
  grid-template-columns: 75px  55px;
  margin:auto;
  grid-gap: 20px;

}

.block{
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  height: 100px;
  position: relative;
}

.block:not(:last-child):after {
  position: absolute;
  content: '';
  left: calc(100% + 9px) ;
  color:red;
  width: 2px;
  height: 80%;
  top: 10%;
  background-color: black;
}

.divider{
    content: '';
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    border-left:1px solid black;
}
 <div class="content-container">
    <div class="content">

      <div class="block">
        test
      </div>

      <div class="block">
        test
      </div>

      </div>
  </div>
2
ashish singh 20 luty 2019, 17:03