我正在使用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代码中的实际元素。
通过将content:after
和grid-column: 2
添加到此伪元素(强制它进入中间列),删除divider元素并使grid-row: 1
成为分隔符。
见下面的演示:
.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
并在该空间中放置一个绝对定位的伪元素 - 请参阅下面的演示:
.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>
一种方法
.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>