Question

我正在尝试创建粘在一起的文本元素。调整窗口大小时，元素相对于彼此保持相同的位置。例如，在下面的示例中，C保持在P.如果我使用了包装器，则该站点将无法使用多个浏览器大小。有没有办法把它放在一个固定的地方，随着窗户移动？

以下是一个例子:( Chris Carpenter）（创意设计） http://chris-carpenter.co.uk/

是否可以使用jQuery执行此操作？

.creative {
text-align: center;
font-size: 40px;
color: #dce0df;
font-family: brush;
}


.chris {
text-align: center;
font-family: helv2;
font-size: 72px;
line-height: 300px;
}

这可能会解释得更好

http://i.stack.imgur.com/iM8r6.jpg

所以我希望在调整窗口大小时，两个文本元素的位置保持相同。

Answer 1

您可以使用CSS 2执行此操作。

这是你想要实现的目标：http://jsfiddle.net/W5tzs/2/

首先将创意转移到克里斯：

<p class="chris">CHRIS CARPENTER<p class="creative">Creative Design</p></p>

然后为广告素材添加相对定位：

.creative {
    text-align: center;
    position: relative;
    top: -110px;
    left: 100px;
    font-size: 40px;
    color: #dce0df;        
}

根据心脏的内容调整顶部和左侧。如果您在克里斯文字换行时需要广告素材，请使用媒体查询。如果在窗口非常小的情况下创意移动会让您感到困扰，请添加最小宽度。

响应式设计，定位元素？

1 个答案: