1

私はheadLinedivコンテナを持っていて<h1>、<h2>それは絶対位置であり、幅は100％です。fittext.jsを正しく機能させるには、幅を100％にする必要がありましたが、divを左に配置するemと、水平スクロールバー。私のサイトの構造のために相対的なポジショニングを行うことはできませんが、それは可能ですが、それは将来的に物事を困難にするでしょう。さて、なぜ私はこの水平方向の幅を取得しているのですか、そしてそれを取り除くにはどうすればよいですか？

プロジェクトを見るhttp://jsfiddle.net/sLXZs/3/

html / js

        <div id="headLine">
            <h1 class="fitText">Austin Kitson</h1>
            <h2 class="fitText">Marketing & Sales</h2>
        </div>




                <script>
                    jQuery(document).ready(function($) {
  $('.fitText').fitText(2.2, { minFontSize: '10px', maxFontSize: '80px' });

});
                </script>

css

#headLine {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 100%;
  background: red; }

</ p>

</ p>

4

3 に答える 3

2

100％ではなくdivのサイズを45％に固定し、fittextのkompressorパラメーターを1に設定するだけで、正しく機能するようです。

Css

#headLine {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 45%;
  background: red; }

脚本

jQuery(document).ready(function($) {
    $('.fitText').fitText(1, {
        minFontSize: '10px',
        maxFontSize: '80px'
    });
});

http://jsfiddle.net/sLXZs/4/でのデモ

于 2012-12-27T22:42:46.313 に答える
1

スクロールバーを回避するためにボディオーバーフローを設定します。

body,html{overflow-x:hidden}

デモ：http：//jsfiddle.net/sLXZs/5/

overflow-x一部の古いブラウザではサポートされていません。使ってみることができますoverflow:hidden

于 2012-12-27T22:45:54.577 に答える
0

100％幅のスタイルを維持し、45％幅を使用しない場合でも、それは可能であり、その場で計算できます。

$("#headLine").width(function () {
   return $(this).width() - $(this).css('left');
});

動作中：http：//jsfiddle.net/sLXZs/6/

于 2012-12-27T22:49:25.630 に答える