Question

我试图让文字保持在右下角，但是一旦我改变了窗口的高度或宽度，它就会离开曲线（显示为here）

当屏幕尺寸发生变化时，我尝试使用百分比，vw，vh，em和it still goes out of the curve进行定位。

关于如何定位它的任何想法，无论屏幕的大小如何，它总是保持在曲线内？

以下是代码：

.phone-number {
  position: absolute;
  bottom: 20vh;
  right: 5vh;
  color: #472d23;
  font-weight: 600;
  font-size: 3vh;
}

.landing-page {
  background: url("../img/bg2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-position: center;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.curve {
  background: url("../img/Curve.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
}

<div class="row">
  <div id="carasoul" class="landing-page">
    <div class="curve">
      <div class="container">
        <h3 class="phone-number">+1 800-800-800</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个..在html中，添加：

<div class="numBox">
    <p class="num">Your number or your stuff</p>
</div>

在css中，添加：

.numBox
    {position:relative;}
.num
    {position:absolute; bottom:0; right:0;}

Answer 2

尝试以下操作将文本设置为相对于右下角的固定位置：

.phone-number {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #472d23;
  font-weight: 600;
  font-size: 3vh;
}

Answer 3

兀。我想我有一个解决方案。

我认为你需要一些东西。这就是......

首先，我认为您需要将自己的位置设置为相对位置。

第二，您需要使用＆＃34;转换：翻译;＆＃34;在您的CSS中设置，但使用您之前使用的任何百分比将文本保留在您想要的位置。你会把那些＆＃34; y＆＃34;和＆＃34; x＆＃34; ＆＃34;翻译＆＃34;中的百分比部分css代码。

为什么我认为这会起作用？

当您为网页（或任何类型的背景）创建全屏视频背景时，通常的做法是使用＆＃34;转换：翻译＆＃34;代码的一个方面，以帮助确保背景保持居中，无论如何。

如果您考虑一下，那么您告诉CSS要做的就是将项目设置为您要告诉它的位置，无论浏览器的条件或大小如何。

使用这个概念，＆＃34;转换：翻译＆＃34;应该工作，无论你想要一个项目在屏幕上的什么位置，无论它是否居中。几个月前，一位经验丰富的工程师告诉我，所有工程（包括编码）都是关于理解概念的，因为没有两种情况会要求完全相同的答案。所以学习的秘诀就是学习如何适应和应用概念。

抱歉......相切！

无论如何，我认为即使我无法为您提供确切的代码，这种方法也会奏效。

还有一件事......

如果＆＃34;位置：亲属＆＃34;不会与我告诉你的事情一起工作，尝试＆＃34; position：absolute＆＃34;。

我希望有所帮助！

将文字放在右下角

3 个答案: