1

パーセンテージを使用して要素のサイズを設定するレスポンシブ グリッド システム システムを作成しています。フロート、インラインブロック、テーブルで構築してみました。アイテムを垂直方向と水平方向の中央に配置できるので、インライン ブロックを使い続けたいと思っています。マージンを使用せずにデザインを作成しました。パディングとボーダーが行を折りたたまないように、ボーダーボックスモデルを使用しています。

ただし、グリッド システムをアップグレードして、行を分割せずに余白を設定できるようにしたいと考えています。基本的に、jquery のカスタム ビルド「box-sizing: margin-box;」です。

jquery を使用して、コンテナーの幅のパーセンテージからマージンの幅のパーセンテージを減算できることを願っています。ただし、インラインブロックが余分な空白を追加するため、これ自体はうまく機能しません。したがって、現在の計画に加えて、jquery を使用して余分な空白を margin-right から差し引いています。実際に動かしてみました！それは私がやりたいことをしますが、小さな問題に直面しています。

計算は十分に正確ではなく、行は互いに数ピクセル異なる結果になります。これは、各行の終わりに直線さえ得られないことを意味します。全体の行はさまざまな長さに出てきます。正確に並べるのに十分正確な計算を行うにはどうすればよいですか?

コードは次のとおりです。

     boxsizing = function(container){

     jQuery(container).each(function() {
      var el = jQuery(this);

      el.css('width', '');
      el.css('margin-right', '');

      var parentWidth = el.parent().width();

      var childWidth = el.outerWidth(false);

      //finds ratio of child container to parent container
      var childDecimal = (childWidth / parentWidth);


      //converts child container to a decimal
      childDecimal = Math.round(childDecimal*10000);


      //gets font size
      var fontSize = el.css('font-size');
      //removes px from the end
      var fontSize = fontSize.slice (0, -2);
      //calculates white space on the right of each div
      var whiteSpace = 0.29*fontSize;
      var fontDecimal = whiteSpace / parentWidth;
      //converts white space to a decimal
      fontDecimal = Math.round(fontDecimal*10000)

      //subtracts extra white space from margin-right
      var newMarginRight = el.css('margin-right');
      var newMarginRight = newMarginRight.slice (0, -2);
          newMarginRight = Math.round(newMarginRight);
          newMarginRight = newMarginRight - whiteSpace;
          newMarginRight = newMarginRight / parentWidth;
          newMarginRight = Math.round(newMarginRight*10000);
          newMarginRight = newMarginRight/100;


      //finds margin to parent ratio
      var marginDecimal = (el.outerWidth(true) - childWidth)/parentWidth;
      //converts margin to decimal form
      marginDecimal = Math.round(marginDecimal*10000);

      //take previous width and subtract margin from it
      var newWidth = (childDecimal - marginDecimal)/100;

      //set the element's width to the new calcualted with and set margin right to the updated value
      el.css('width', newWidth + "%");
      el.css('margin-right', newMarginRight + "%");
     });
    }


    jQuery(window).load(function() {
        boxsizing('.margins');
    });
4

1 に答える 1

1

So let me get this straight, you're going to use jQuery to "fix" a grid framework? This would be a good time to gather your thoughts and go back to the drawing board.

すべてのグリッド システムには常に妥協が伴います。ホワイトスペースをうまく処理できないもの (インライン グリッド) もあれば、痕跡クラスを必要とするもの (フロート グリッド) もあれば、単純なもの (テーブル グリッド) もあります。しかし、彼ら全員が同意することが 1 つあります。それは、彼らが CSS を使用していることです。

JavaScript グリッドが必要な場合、マークアップは文字通り何でもかまいません。実際の<row>and<column>要素を作成することもできます。誰もこれを行わない理由は単純です。コンテンツが完全にロードされ、スクリプトがすべてを整理するまで、ブラウザーはユーザーに何も表示できません。

JavaScript (および拡張により jQuery) に依存するすべてのグリッド システムは、次の 2 つのいずれかを実行する必要があります。

  1. すべてを描画するのに「ちょうどいい」状態になるまで、ページのコンテンツを非表示にします。また
  2. ぐちゃぐちゃになったページを表示してから、ぐるぐる回して修正します。

通常、これらのオプションはどちらも受け入れられるとは見なされません。ですから、自由に独自のグリッド システムを設計してください。主は、インターネットがより多くのグリッド システムを必要としていることを知っていますが、CSS を使用してください。

于 2013-09-15T02:08:46.890 に答える