主页 / 问题 / 1144241
Accepted
midnightelf18
Asked:2020-06-22 19:20:54 +0800 CST2020-06-22 19:20:54 +0800 CST

如何在积木下制作这样的条带？

  • 772

在此处输入图像描述
我正在尝试布置这样一个块，其中包含三个在中心对齐的行中的块，并且在背景上有这样的“条纹”。我是这样做.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>

html

1 个回答

  1. Best Answer

    .frame {
  width: 100%;
  height: 256px;
  display: flex;
  background-color: red;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 12px;
  position: relative;
}
.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%; */
    left: 0;
    right: 0;
    height: 128px;
    /*! margin-top: 64px; */
    display: inline-block;
}
    <div class="frame">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

    • 0

相关问题