0

わずかに透明な 2 つの文字列を使用して、レスポンシブ デザインのロゴを作成しようとしています。ストリングはさまざまなサイズで、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 here

4

3 に答える 3

1

CSS にタイプミス ('position' ではなく '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

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;
}

例

于 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 に答える