將滾動框向下移動到文本框區域？

我做了一個簡單的佈局，但已經過了多年，因爲我已經編碼，並且在定位和移動滾動框時遇到了問題，無法與我在此圖像上創建的文本框區域對齊。將滾動框向下移動到文本框區域？

這是我到目前爲止的編碼。肯定失去了一些東西......

<center> 
 
<div class="img"> 
 
    <div class="scroll"> 
 
     <a> 
 
     text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here   text here text here text here text here 
 
     </a> 
 
    </div> 
 
</div> 
 
<style> 
 
    .img{ 
 
    background-image: url(http://i65.tinypic.com/4janew.jpg); 
 
    background-size: 100% 100%; 
 
    width: 930px; 
 
    height: 634px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    padding: 7%; 
 
} 
 

 

 
.scroll{ 
 
    height: 50%; 
 
    width: 100%; 
 
    overflow-y: auto; 
 
    padding-right: 25%; 
 
} 
 

 
.scroll a{ 
 
position: relative; 
 
bottom: -400px; 
 
    font-size: 14px; 
 
    color: #BBA894; 
 
    font-family: Times New Roman; 
 
} 
 
</style></center>

來源

2017-08-25 Connie

你是什麼意思的滾動框和文本框？期望的結果應該是什麼樣子？此外，'

'元素不再存在。 – j08691

對不起，很生鏽！如果您在整個頁面上運行代碼段，您可以看到在「Alma's」名稱下面的佈局底部，我爲我想定位滾動框的位置創建了一個矩形空間。但正如您所看到的，滾動框/文本位於佈局圖像的中心，而不是底部的矩形區域。不知道我錯過了什麼，或者我需要拿出什麼，因爲我多年沒有編碼。 – Connie

另外，中心元素用於將整個圖像定位在網站上。 – Connie

好吧，我有點不清楚的是，但這裏是我有：

.img{ 
    background-image: url(http://i65.tinypic.com/4janew.jpg); 
    background-size: 100% 100%; 
    width: 930px; 
    height: 634px; 
    text-align: center; 
    overflow: hidden; 
    padding: 7%; 
    position: relative; 
} 


.scroll{ 
    position: relative; 
    height: 50%; 
    width: 100%; 
    overflow-y: auto; 
    padding-right: 25%; 
} 

.scroll a { 
    position: absolute; 
    left: 100px; 
    right: 100px; 
    bottom: 250px; 
    font-size: 14px; 
    color: #BBA894; 
    font-family: Times New Roman; 
}

由於圖像中包含框，什麼你需要做的是將文本居中放置，就像我已經完成的那樣：

https://jsfiddle.net/L2saoou8/

如果您希望它滾動，那麼只需將高度添加到文本的包含框中，.scroll然後溢出：auto。

來源

2017-08-25 20:14:30 stevelacerda7

明白了。謝謝你的幫助！ – Connie

不知道這是你想要的，但嘗試加入

padding-top：30％;

到.scroll {}的CSS。

因此，使它看起來像這樣：

.scroll { 
height: 50%; 
width: 100%; 
overflow-y: auto; 
padding-right: 25%; 
padding-top: 30%; 
}

雖然我不推薦這種方式，因爲這不是響應式設計。像背景圖像這樣的文字特定區域將不會響應平臺，如從桌面到平板電腦到移動等。我建議您從圖像中刪除該矩形框，並將其作爲一個背景顏色的div盒子的顏色與透明度並將其放置在圖像上，就像該div內的滾動div一樣。謝謝！希望它有幫助。

來源

2017-08-25 20:16:36

這是一個很好的建議，感謝您的幫助！ – Connie

將滾動框向下移動到文本框區域？

回答

相關問題