處的文本留在右下角

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

處的文本留在右下角

回答

相關問題