1

わかりました、これに少し苦労してきました。私は希望する外観をほとんど持っていますが、アイテムの配置に苦労しています. 基本的には、ストロークが外側にあるストローク テキストが必要です。つまり、webkit テキスト ストロークは役に立たないということです。

そこで、2 つのテキスト要素を重ねて配置し、そのようにすることにしました。そして、私が position:absolute を使用していることを除いて、要素には本質的に高さがありません。

HTML は次のようになります。

<div class="hcontainer"
    <h2>A Framework For Web Artisans</h2>
    <span class="h2white">A Framework For Web Artisans</span>
</div>

CSS は次のようになります。

h2{font-size:2em; 
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute; 
top:10px; 
left:0px;}

.h2white{font-family:dom_bold,arial black;
font-size:2em; 
margin: 10px 0;
color:#FFF;
position:relative; 
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}

.hcontainer{position:relative;clear:both;height:2em;}

それでは本題です。hcontainer には高さを設定する必要があります。これは、含まれる要素が絶対的に配置されているため、高さがなく、フローが混乱するためです。問題は、要素を適切に配置できるように高さを動的にすることです。

見出しごとに個別のコンテナーを作成することもできますが、それは少し多すぎるように思えます。私がここでやろうとしていることを行うためのより良い方法を考えられる人はいますか? それとも高さの問題を回避する方法ですか？

http://jsfiddle.net/calder12/9M7YZ/

4

1 に答える 1

1

「要素を適切に配置できるように、その高さを動的にすることが問題です」という意味がよくわかりません。ただし、.hcontainer で高さを宣言する必要がないようにする場合は、.h2white で負の上部マージンを使用して、絶対配置を使用する代わりに赤い h2 の上に配置できます。そのようです：

http://jsfiddle.net/9M7YZ/10/

.h2white{
    font-family:lemon;
    font-weight:bold;
    font-size:4em;
    color:#FFF;
    letter-spacing:-2px;
    margin-top:-86px;
    position:absolute;
}
于 2013-03-08T21:31:57.143 に答える