处的文本留在右下角

我想使文本停留在右下角，但一旦我改变窗口的高度或宽度，它超出曲线（如图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>

来源

2017-05-28 L. Wu

你的代码在哪里？ –

请添加您的代码。 – AdhershMNair

对不起。我添加了我的代码 –

请尝试以下方法文本的位置相对固定设置右下角：

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

来源

2017-05-28 15:06:41 Gerard

嗨，我希望文本留在曲线的橙色部分：http://i.imgur.com/MvnjaxQ.png 这只适用于非常小的屏幕尺寸，但屏幕更大，在曲线的橙色部分之外。 –

你有没有在互联网上可以访问的图像？ – Gerard

http://i.imgur.com/Y68prLW.png 我希望文本保持定位在曲线的半透明橙色部分 –

试试这个..在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;}

来源

2017-05-28 15:09:46 user8077853

嗨，我想让文本留在图片的圆圈部分：http： //i.imgur.com/MvnjaxQ.png，但问题是，在较小的屏幕上，数字超出了该圈选区域 –

吴。我想我对你有一个解决方案。

我想你会需要一些东西的组合。这里去...

第一，我认为你将需要设置你的位置相对。

第二个，您将需要使用“transform：translate”。设置在你的CSS，但使用你以前使用的任何百分比保持文本在你想要它。你会把这些“y”和“x”百分比放在css代码的“translate”部分。

为什么我认为这会工作？

当您为网页（或任何类型的背景）创建全屏视频背景时，通常会使用代码的“transform：translate”方面来确保背景保持居中无论。

如果你仔细想想，你告诉CSS要做的事情就是将该项目动画到你告诉它所处的位置，而不管浏览器的条件或大小。

使用这个概念，“变换：翻译”应该工作，无论你想要一个项目在屏幕上的位置，无论它是否居中。几个月前，一位非常有经验的工程师告诉我，所有工程（包括编码）都是关于理解CONCEPTS的，因为没有两种情况需要精确的相同答案。所以学习的秘诀就是学习如何适应和应用概念。

对不起......切线！

无论如何，我认为这种方法可行，即使我无法提供准确的代码。

还有一件事......

如果“位置：相对”不符合我所说的话，请尝试“位置：绝对”。

我希望有帮助！

来源

2017-05-28 19:20:09

处的文本留在右下角

回答

相关问题