0

いくつかのテキスト列を含むレスポンシブ デザインがあります。列には h2 見出しがあり、見出しの左側に画像アイコンが表示されます。見出しテキストの垂直方向の中央に配置されています。ウィンドウの幅を狭くすると問題が発生します。単一の見出し行が折り返されると、アイコンに対して垂直方向に整列されなくなります。

基本的に、見出しの垂直位置を中央に変更できるように、2 行に折り返すときに見出しのクラスを変更するように指示するスクリプトを作成しようとしています。

私はスクリプト作成に本当に慣れていないので、書き方がわかりませんが、基本的には次のとおりです。

if window width > 768 and if lines of text in #services h2 = 1

#services h2 {
top:9px;
}

else

if window width > 768 and if lines of text in #services h2 > 1

#services h2 {
top:1px;
}

誰かがこれを適切にフォーマットするのを手伝ってくれますか? 私はすでに他のものにjQueryを使用しているので、それでそれを行うことができれば、それは素晴らしいことです.

ありがとう！

編集:これの最も重要な部分は、行が1行から2行に折り返されるときにクラスプロパティを変更することです.これは重要な部分です:

if lines of text in #services h2 = 1

#services h2 {
top:9px;
}

else

if lines of text in #services h2 > 1

#services h2 {
top:1px;
}
4

3 に答える 3

1

背景画像の縦位置を50％に設定してみませんか？比較的小さな外観上の変更にjsを追加するのではなく。

于 2012-04-09T19:53:26.030 に答える
0

JavaScript (jQuery を含む) は必要ありません。純粋な CSS を使用してください: http://www.css3.info/preview/media-queries/。

詳しい説明はhttp://css-tricks.com/css-media-queries/にあります。

于 2012-04-09T19:48:24.217 に答える
-1

「and if 行のテキスト」についてはわかりませんが、AND の左側は次のようになります。

-編集-なるほど、これがあなたが望むものかどうか見てみましょう。

$(window).resize(function(){
     var h =$('#services h2').css('line-height');
     var size = $(window).width();
     if (size > 768){
          if( $('#services h2').height() == h){
                 $('#services h2').css('top','1px')
          }
     }else{
           if( $('#services h2').height() > 2*h){
                 $('#services h2').css('top','9px')
          }
     }

});
于 2012-04-09T19:46:16.080 に答える