如何使文本在浏览器和设备规模上保持原位

Question

我得到了这个副本，我需要放入页脚。当浏览器设置为1920px视图时，我可以很好地定位.special，但是如果我更改分辨率或设备，我正在查看文本的位置开始移位。我已经尝试过使用百分比，但是当它达到某一点时，它仍然没有达到想要的静态位置id。

所以基本上现在有一种方法可以使div .special保持在同一位置而不管比例，因为我不希望它跨越或移动到远离divder div .divide。最终我喜欢做同样的.reason来定位在.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个属性。这些是＆＃34;理性的＆＃34;定位你的div。使用margin和padding更容易。

例如，检查所有已删除css的代码：JS FIDDLE DEMO。它工作得很好，所有内容都显示在屏幕内（每个设备/大小）。

如果您现在想要对其进行样式化，则可以使用margin在元素周围添加空间，或padding来拉伸它们。起初，它们似乎有点相同，但了解它们的区别很重要。 » Read more about them here.

由于很难理解你的布局或问题，我尝试编辑你的html，使其保留在视口内并创建一些示例样式，以便你明白：

JS FIDDLE DEMO