文字不會留在DIV中

即使觀衆決定縮放瀏覽器中的文字，我也希望文字保持在DIV之內。現在文本只是在DIV之外。我相信我可能會遺漏一些代碼或搞砸了。文字不會留在DIV中

下面是代碼：

CSS：

.footer { 
    height: 110px; 
    width: 1024px; 
    background-color: #000000; 
    margin: auto; 
    -webkit-box-shadow: 1px 2px 20px 0 #000000; 
    -moz-box-shadow: 1px 2px 20px 0 #000000; 
    box-shadow: 1px 2px 20px 0 #000000; 
    font-family: 'Jura', serif; 
    font-size: 20px; 
    color: #ffffff; 
}

HTML：

<div class="footer"> 

    <span style="position:relative;top:15px;left:0px"> 
     <a href="mailto:[email protected]">[email protected]</a> 
    </span> 

    <span style="position:relative;top:15px;left:300px"> 
     © 2017 diversedesigning.com 
    </span> 

</div>

來源

2017-01-10 Jamus

你應該更新你的問題，閱讀http://stackoverflow.com/help/mcve。您也可以使用jsfidle或堆棧溢出布丁。對你的問題：在鉻和Firefox測試，看起來不錯。所以你應該添加瀏覽器，也許還有你遇到問題的版本，也許會添加一些屏幕。 – user1097772

如果用戶使用瀏覽器設置調整字體大小，您是否問如何保留頁腳div中的文本？如果是這樣，您可以通過刪除腳註中固定的「寬度」和「高度」值來解決該問題。（一種選擇是將「寬度」更改爲「最小寬度」，將「高度」更改爲「最小高度」） –

給它與跨度和家長的相對位置絕對定位的嘗試DIV。

.footer { 
 
height:110px; 
 
width:100%; 
 
background-color:#000000; 
 
margin: auto; 
 
-webkit-box-shadow: 1px 2px 20px 0 #000000; 
 
-moz-box-shadow: 1px 2px 20px 0 #000000; 
 
box-shadow: 1px 2px 20px 0 #000000; 
 
font-family: 'Jura', serif; 
 
font-size: 20px; 
 
color:#ffffff; 
 
position:relative; 
 
} 
 

 
.footer span:first-child 
 
{ 
 
    position:absolute; 
 
    top:15px; 
 
    left:0px 
 
} 
 

 
.footer span:last-child 
 
{ 
 
    position:absolute; 
 
    top:15px; 
 
    right:0px 
 
}

<div class="footer"> 
 

 
<span ><a href="mailto:[email protected]">[email protected]</a></span> 
 

 
<span>© 2017 diversedesigning.com</span> 
 

 
</div>

來源

2017-01-10 01:44:17 Deep

非常感謝您的幫助！ – Jamus

@Np :)很高興幫助 – Deep

不太清楚什麼你問，所以我已經添加了兩個可能的awnsers

如果你想讓它總是在div屏幕上停留

我相信這是你正在尋找的一個，如果你想讓div在調整屏幕大小時保持在同一個位置你需要設置你的DIV這是父元素位置相對和子元素，它的跨度位置將需要絕對的，像這樣

HTML

<span style="position:absolute;top:15px;left:5px"><a   href="mailto:[email protected]">[email protected]</a></span> 

<span style="position:absolute;top:50px;left:300px">© 2017  diversedesigning.com</span> 

</div>

CSS

.footer { 
    position:relative; 
    height: 110px; 
    width: 1024px; 
    background-color: #000000; 
    margin: auto; 
    -webkit-box-shadow: 1px 2px 20px 0 #000000; 
    -moz-box-shadow: 1px 2px 20px 0 #000000; 
    box-shadow: 1px 2px 20px 0 #000000; 
    font-family: 'Jura', serif; 
    font-size: 20px; 
    color: #ffffff; 
}

文本稍微在div外？

我也不太清楚爲什麼它剪輯的邊緣這樣的，但你可以把你的頁腳DIV一些填充，使他們遠離邊緣

我只是把它添加到您的CSS下面。

.footer { 
height:110px; 
width:1024px; 
background-color:#000000; 
margin: auto; 
-webkit-box-shadow: 1px 2px 20px 0 #000000; 
-moz-box-shadow: 1px 2px 20px 0 #000000; 
box-shadow: 1px 2px 20px 0 #000000; 
font-family: 'Jura', serif; 
font-size: 20px; 
color:#ffffff; 
padding:15px; 
}

你也剛剛從邊緣改變你的第一跨度的左值，以保持它拿走

<span style="position:relative;top:15px;left:5px"><a href="mailto:[email protected]">[email protected]</a></span>

公司希望任何這有助於！

的jsfiddle鏈接：https://jsfiddle.net/gaL494yf/

來源

2017-01-10 01:46:21 PloxPanda

感謝您的幫助！ – Jamus

文字不會留在DIV中

回答

相關問題