0

我正在尝试使用 2 个字符串创建一个响应式设计徽标，两者都略微透明。琴弦有不同的尺寸，第二根在第一根之上。

我几乎得到了我想要的（尝试下面的 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在这里

4

3 回答 3

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/

于 2013-05-09T14:18:18.053 回答
1

看看视口大小的排版

尝试使用该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;
}

例子

于 2013-05-09T14:48:20.880 回答
0

将 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>
于 2013-05-09T14:49:33.747 回答