Question

我正在尝试覆盖这张卡片，上面写着“A，Snare”，其中30％的顶部和30％留在画布上，但是在画布的右侧会有这个尾随的空白区域。我附上一张带有“div.content”的图片，突出显示我的意思。如何让这张卡浮在画布上方而不会产生任何空格？

<body>
    <canvas id="canvas" resize hidpi=off></canvas>
      <div class="content">
        <div class="card">
          <h1 class="card__title">A</h1>
          <p class="card__description">
            Snare
          </p>
        </div>
      </div>
</body>

import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';

Answer 1

您目前将content的宽度设置为100%。这意味着此div的宽度为屏幕的100％。您的margin-left为30％，总宽度为130％。使您的content宽度达到70％，问题就解决了，总计为100％。

编辑：我让card更宽，以显示文字，只是你知道。

＆＃13;

#canvas{
  background:black;
  width:100%;
  height:100%;
  position:absolute;
  z-index: -1;
  overflow: hidden;
}

body, html{
  height:100%;
  margin:0;
}



.content{
  display:inline-block;
  left: 30%;
  top:30%;
  width: 70%;
  position:relative;
}

.card{
  background-color:green;
  width:10%;
  height 100%;
  border: white solid 2px;
}

＆＃13;

<body>
    <canvas id="canvas" resize hidpi=off></canvas>
      <div class="content">
        <div class="card">
          <h1 class="card__title">A</h1>
          <p class="card__description">
            Snare
          </p>
        </div>
      </div>
</body>

＆＃13;

如何在不创建更多空间的情况下在画布上叠加div

1 个答案: