Question

我正在尝试创建一个响应式设计徽标，使用2个字符串，两个都略微透明。字符串大小不同，第二个字符串位于第一个字符串的顶部。

我几乎得到了我想要的东西（try下面的HTML）但是我希望2个字符串的右边缘对齐 - Div扩展到浏览器的宽度，重叠随着显示器的宽度。

因为我想给浏览器一些关于它如何渲染的选择，我宁愿不使用像素测量。

如果它完全相关 - 我计划在Div的任一侧添加其他元素。

<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
    position: relative;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 800%;
    text-align:center;
    letter-spacing: -0.1em;
    color: red;
    opacity: 0.2;
    top: 0;
    left: 0;
}
.innerText {
    position: absolute;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 600%;
    text-align:right;
    letter-spacing: -0.1em;
    float: right;
    color: blue;
    opacity: 0.2;
    z-index: 1;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<div style="position:relative">
    <span class="outerText">OuterTxt</span>
    <span class="innerText">InnerTxt</span>
</div>
<hr />
...nearly right - but the rt edges are not (necessarily) aligned
</body>
</html>

更新：jsfiddle here

Answer 1

你的CSS中有一个拼写错误（'postition'而不是'position'），这可能让人感到困惑。此外，我认为你想在错误修正后删除“float：right”。

这似乎是（我认为）你想要的：

div { /* make the selector more specific */
    height: 150px; /* or whatever's suitable */
}
.outerText {
    position: absolute;
    bottom: 0;
    right: 0;
}
.innerText {
    position: absolute;
    bottom: 7px; /* adjust as desired to compensate for smaller font size */
    right: 0;
}

http://jsfiddle.net/nNMwb/2/

Answer 2

查看Viewport Sized Typography

尝试使用vw单元，我发现在您的示例中28.5vw给出了所需的结果。

.outerText {
    position: relative;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 28.5vw;
    text-align:center;
    letter-spacing: -0.1em;
    color: red;
    opacity: 0.2;
    top: 0;
    left: 0;
}
.innerText {
    position: absolute;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 28.5vw;
    text-align:right;
    letter-spacing: -0.1em;
    float: right;
    color: blue;
    opacity: 0.2;
    z-index: 1;
    right: 0;
    bottom: 0;
}

example

Answer 3

将Div嵌入表格单元格似乎可以为我提供我正在寻找的结果 - 内部和外部文本都在右边缘对齐，共享相同的基线并且不会相对于彼此移动页面已调整大小：

<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
    postition: relative;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 800%;
    text-align: right;
        letter-spacing: -0.1em;
    color: red;
    opacity: 0.2;
    right: 0;
    bottom: 0;
}
.innerText {
    position: absolute;
    font-family: Arial,sans-serif;
    font-weight: 900;
    font-size: 600%;
    text-align:right;
        letter-spacing: -0.1em;
    float: right;
    color: blue;
    opacity: 0.2;
    z-index: 1;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<table>
<tr>
<td>left</td>
<td>
<div style="position:relative">
    <span class="outerText">OuterTxt</span>
    <span class="innerText">InnerTxt</span>
</div>
</td>
<td>right</td>
</tr>
</table>
<hr />
...yeah!
</body>
</html>

CSS：对齐叠加层

3 个答案: