8

この効果を得るにはどうすればよいですか：

<pre class="default prettyprint prettyprinted" data-codetitle="homepage.html" style=""><code>
body{
  position: relative; 
  @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    $half, $darkbackground $half, $darkbackground));
  color: $text;
  width: 100%;
  height: 100%;
  @include breakpoint(baby-bear) {
    @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    45%, $darkbackground 45%, $darkbackground));
  }
}
</span></code></pre>

見出しとして data タグを使用する必要があります。

.prettyprint {
    margin: 0 0 0 0.5%;
    border-left: 2px solid #ce8f80;
    overflow: auto;
    position: relative;
    width: 300px;
}
.prettyprint:before {
    content: attr(data-codetitle);
    background: #ce8f80;
    display: block;
    width: 100%;
}

これが結果です。問題は、スクロールすると:before要素もスクロールすることです。この要素を固定しておく方法はありますか。さまざまなバリエーションを試しましたが、うまくいきません。

ありがとう

4

2 に答える 2

-4

これを試して：

.prettyprint:before {
    content: attr(data-codetitle);
    background: #ce8f80;
    display: block;
    position: fixed;
    width: inherit;
}

position: fixed要素がスクロールに追従しないように設定しwidth: inheritてから、疑似要素を親要素と同じ幅に保つように設定します。

フィドル参照: http://jsfiddle.net/audetwebdesign/r8aNC/2/

于 2013-03-30T18:37:24.090 に答える