我正在尝试布置这样一个块,其中包含三个在中心对齐的行中的块,并且在背景上有这样的“条纹”。我是这样做.frame::before
的,但它超出了界限.frame
。我怎样才能使它的.frame::before
宽度100%
相对于.frame
?
.frame {
width: 100%;
height: 256px;
display: flex;
background-color: red;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 12px;
}
.block {
height: 200px;
width: 128px;
background-color: chocolate;
margin: 0 24px;
border-radius: 8px;
z-index: 0;
}
.frame::before {
position: absolute;
content: "";
background-color: deepskyblue;
width: 100%;
height: 128px;
/*! margin-top: 64px; */
display: inline-block;
}
<div class="frame">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
1 个回答