Question

我正在使用CSS网格。我要求两个DIV之间有一个垂直分隔符。但是，垂直分隔符需要小于实际DIV的高度，因此我不相信我可以使用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>

这可行，我可以使用margin-top和margin-bottom来控制分隔线的高度。

理想情况下，我希望此分隔符是CSS伪元素，但我无法以任何方式使其工作。这是否有可能达到预期的结果，或者我必须坚持HTML代码中的实际元素。

Answer 1

一种方法

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

Answer 2

删除 divider 元素，并在此 pseudo元素中添加content:after和grid-column: 2，将grid-row: 1设置为 divider （将其强制插入中间列）。

请参见下面的演示

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

如果您想在每个 block之后加上一个除法器，则可以在每个grid-gap之间使用一个block并在其中放置一个< em>绝对在该空间中放置了 pseudo 元素-请参见下面的演示

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

Answer 3

以下是对@kukkuz 回答的改进。

@kukkuz 的回答没有响应，因为他的 right 属性值用 px 而不是 vw 表示。如果最终用户减少或增加浏览器的宽度，则垂直分隔符的移动速度将与网格布局的列调整大小不同。它们不会在视觉上同步。结果：分隔符会溢出列的内容。

解决方案：对@kukkuz 的vw 属性使用px 而不是right。

垂直分隔线作为带有CSS网格的伪元素

3 个答案: