如何讓文本保持在瀏覽器和設備上的位置

Question

我得到了這個即時通訊需要放在頁腳中的副本。我可以定位.special，當瀏覽器設置爲1920px視圖時，我很喜歡它，但是如果我更改分辨率或設備，我正在查看文本的位置開始移位。我曾嘗試使用百分比，但是當它達到某個點時，它仍然不在所需的靜態位置id中。

所以基本上現在有一種方法可以讓div .special停留在同一位置而不管規模，因爲我不希望它跨越或移動到離divder div .divide很遠的地方。最終id喜歡做同樣的事情。原因是定位在.divide div的另一面，但現在我只是想讓那些.special文本留在一個位置，將保持在規模變化相同（對不起網站心不是生活，所以我真的不能鏈接不多，但對我來說，調整將真正幫助，感謝）

這裏總體思路是HTML和CSS相關的話題：

<!--===================================================Content===================================================!--> 
<div class="contentwrap"> 
    <div class="textwrap"> 
     <div class="special"> 
      <p>Specializations</p> 
      <p>With various skills in branding,<br /> 
      multi-media and advertising I am able to provide<br /> 
      fresh and inspiring solutions for the task given to me. <br /> 
      Using various programs such as:</p> 
     </div> 
    </div><!--close textwrap--> 
    <div class="content"> 
      <div class="divide"> 
      </div><!--close divide!--> 
    </div><!--close content!--> 
    <div class="reason"> 
     <p>Specializations</p> 
     <p>With various skills in branding,<br /> 
     multi-media and advertising I am able to provide<br /> 
     fresh and idsapiring solutions for the task given to me. <br /> 
     Using various programs such as:</p> 
    </div><!--close reason!--> 
</div><!--close contentwrap!--> 

CSS

/*---------------------------- Content ----------------------------*/ 
.contentwrap{ 
    position:relative; 
    top:500px; 
    width:100%; 
    z-index:500; 
    #171717 
} 
.content{ 
    position:relative; 
    height:290px; 
    min-height:212px; 
    -moz-box-shadow: 0px -10px 20px 0px #000; 
    -webkit-box-shadow: 0px -10px 20px 0px #000; 
    box-shadow: 0px -10px 10px 0px #000; 
    margin:0 auto; 
} 
.textwrap{ 
    position:absolute; 
    width:100%; 
    background:#090; 
} 
.special{ 
    position:relative; 
    text-align:center; 
    width:350px; 
    left:400px; 
    background:#006; 
} 
.divide{ 
    position:absolute; 
    background:url(../images/divide.png) no-repeat top; 
    width:100%; 
    height:190px; 
    top:40px; 
    z-index:1000; 
} 
.reason{ 
    position:absolute; 
    text-align:center; 
    width:350px; 
    left:800px; 
    background:#006; 
} 

Answer 1

您使用了大量的position: absolute或position: relative屬性。在定位你的div時這些都是「理性」的。使用margin和padding要容易得多。

例如，檢查您的代碼，刪除所有的css：JS FIDDLE DEMO。它工作得很好，一切都顯示在屏幕內（在每個設備/尺寸上）。

如果您現在想要設置它的風格，可以使用margin在元素周圍添加空格，或者使用padding來擴展它們。起初，看起來他們似乎是一樣的，但瞭解他們的差異很重要。 » Read more about them here.

由於其相當辛苦，理解你的佈局或問題，我嘗試過編輯你的HTML，使其停留在視口內部和創造了一些例子風格，讓你得到一個想法：

JS FIDDLE DEMO