CSS：對齊疊加層

我正在嘗試使用2個字符串創建響應式設計徽標，這兩個字符串都略顯透明。琴絃尺寸不同，第二個在第一個之上。CSS：對齊疊加層

我幾乎得到我想要的（下面的HTML爲try），但是我希望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

來源

2013-05-09 symcbean

創建一個jsfiddle，以便我們可以使用您的代碼進行遊戲。 – Cam 2013-05-09 14:08:00

你是什麼意思的右手邊緣？ – 2013-05-09 14:09:12

'郵政：絕對;'有一個錯字。 – Blazemonger 2013-05-09 14:16:12

你在你的CSS（而不是 '位置' postition'），這可能是令人困惑的事情有一個錯字。另外，我認爲一旦修正了這個錯字，你就想刪除「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-09 14:18:18 Blazemonger

我不認爲這就是我想要的 - 兩個文本的基線不匹配，tand無標題的文本出現在徽標上方。 – symcbean 2013-05-09 14:47:29

你現在可以讓它看起來如何，明顯的問題得到解決嗎？沒有圖片，我們很難知道你想要它的樣子。你必須調整一個元素的垂直位置，因爲它們是不同的字體大小。 – Blazemonger 2013-05-09 14:55:43

已更新的答案。 – Blazemonger 2013-05-09 14:59:47

看一看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

來源

2013-05-09 14:48:20

不錯 - 我不知道這種類型的大小（正如你可能已經收集到的，CSS不是我的優勢之一）。唯一的缺點是，它不會得到我的大部分用戶羣的支持:(http://caniuse.com/#feat=viewport-units – symcbean 2013-05-09 14:55:53

表格單元格中嵌入事業部似乎給我，我要找的結果 - 內外文本的右邊緣對齊兩種，共享相同的基線和唐在頁面大小調整時不會相對於彼此移動：

<!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-09 14:49:33 symcbean

沒有！沒有基於表格的佈局！壞開發者！ – Blazemonger 2013-05-09 15:00:34

是的 - 我知道它的凌亂 - 只是相當冗長的添加評論（我沒有接受這個作爲我的答案！） – symcbean 2013-05-09 15:43:49

CSS：對齊疊加層

回答

相關問題