如何使用响应式CSS在屏幕上粘贴内容？

debugcn 发表于 Dev

明天约翰逊

我正在尝试制作金融科技应用程序，并且正在使用来自现有应用程序的模型作为自己的UI。我需要它看起来尽可能专业。我有一个问题。我的应用程序在其中一部分中有一张卡。在PC上，它看起来不错，但从移动设备上的原始位置移开了。我添加了媒体查询，但没有帮助。

这是我的代码：

  .card-container {
  position: relative;
}

.card-tip {
  width: 290px;
  height: 16px;
  background-color: rgba(223, 186, 129, 0.6);
  margin: 30px auto 0 auto;
  border-radius: 40px;
}

.card-tip span {
  width: 250px;
  height: 3px;
  display: block;
  background-color: #8F6524;
  margin: auto;
  transform: translateY(6px);
}

.card {
  width: 260px;
  height: 350px;
  background-color: white;
  margin-left: 40.5%;
  box-shadow: 3px 3px rgba(32, 30, 30, 0.3);
  transform: translateY(-9px);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;

<section id="feature-section">
  <h1>It's free to send money</h1>
  <p>It costs nothing to send money, when you link your Paga wallet to your bank account.</p>
  <div class="card-container">
    <div class="card-tip">
      <span></span>
    </div>
    <div class="card">
      <h6>Your receipt</h6>
      <i class="fas fa-chevron-circle-up"></i>
      <p>₦<span>0</span>.00</p>
      <h6>No transfer fee</h6>
      <h6>No 'convenience' fee</h6>
      <h6>No hidden charge</h6>
      <img src="images/rocket.png" alt="">
    </div>
  </div>
</section>

也可以通过以下链接锁定完整的网页：https : //chinomso1995.github.io/mini-fintech-application。

只需点击汇款即可。它的第一个链接项。

卡在移动设备上移动。

CanUver

使用左边距左边的项居中是不正确的。您可以使用margin：自动精确地使项目居中。如果使用margin-left来使项目彼此平均，则必须针对每种尺寸（平板电脑，移动设备）再次调整它们。方法不正确。

我还使用了display：flex结构使卡上下移动而不会溢出。

无论它们是什么尺寸，都不会溢出，因为我使用Display flex。

.card-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.card-tip {
  width: 290px;
  height: 16px;
  background-color: rgba(223, 186, 129, 0.6);
  margin: 30px auto 0 auto;
  border-radius: 40px;
}

.card-tip span {
  width: 250px;
  height: 5px;
  display: block;
  background-color: #8F6524;
  margin: auto;
  transform: translateY(6px);
}

.card {
  width: 260px;
  height: 350px;
  background-color: #000234;
  box-shadow: 1px 1px 1px rgba(32, 30, 30, 0.3);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin: auto;
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;

<section id="feature-section">
  <h1>It's free to send money</h1>
  <p>It costs nothing to send money, when you link your Paga wallet to your bank account.</p>
  <div class="card-container">
    <div class="card-tip">
      <span></span>
    </div>
    <div class="card">
      <h6>Your receipt</h6>
      <i class="fas fa-chevron-circle-up"></i>
      <p>₦<span>0</span>.00</p>
      <h6>No transfer fee</h6>
      <h6>No 'convenience' fee</h6>
      <h6>No hidden charge</h6>
      <img src="images/rocket.png" alt="">
    </div>
  </div>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。