0

さて、私はこれを100万通りの方法で達成しようとしましたが、良い方法を見つけることができません.

私がしたいのは、幅を定義せずにスタイルシートにボックスを作成して、任意の数のダッシュボード アイテムのモジュール コンテナーとして使用し、幅 25、幅 33、幅 50、幅 100 のクラスを用意して、モジュール コンテナーの幅を次のように設定することだけです。 25%、33% など... 状況に応じて。

ここに画像の説明を入力

各コンテナの間に、スペーサーまたはバンパーが必要です。1 行に 3 つのボックスがあるとします: 25%、50%、25%。スペーサーを追加するには、実際に width25 を 24% に設定し、バンパーを 1% に設定する必要があります。親コンテナーの幅を 100% 埋めようとすると、おかしなことになります。私は理にかなっていますか?

これを行うより良い方法はありますか?ボックスにパディングを追加すると、さらに問題が発生します。これは、div の合計幅にも追加されるためです。私はちょうどこのような素敵できれいなものが欲しいです:

ここに画像の説明を入力

...各モジュールには同じクラスがあり、幅のクラスを除きます。理想的には、これらの幅は width25 = 25%...width50 = 50%... であり、バンパーのサイズを補うためにあいまいな幅ではありません。

考え?これは私を怒らせています。

4

3 に答える 3

2

わかりました、私にはあなたには約4つの選択肢があるようです。

  1. box-sizing:border-
    box-これにより、幅の計算方法が変更されるためwidth: 30%、2pxの境界線を指定して追加すると、ボックスは30%のままになり、境界線は指定した幅内にレンダリングされます。

  2. calc()
    -これにより、次のようなことができますwidth: calc(20% - 2px);

  3. アウトライン
    -アウトラインは要素の周囲にレンダリングされ、サイズには影響しません。これはあなたに合わないかもしれません。

  4. div内
    のdiv-外側のdivの幅を必要な間隔に設定してから、内側のdivを好きなようにスタイル設定します。

于 2013-02-05T20:39:45.257 に答える
0

これらのグリッド システムを見てみましょう。

http://960.gs/

http://goldengridsystem.com/

http://grids.heroku.com/

他にもたくさんあります。これらは、開始するのに十分なはずです。

example: http://jsfiddle.net/E9zfY/

于 2013-02-05T20:33:17.940 に答える
0

パディングを使用したいようです。そうすれば、モジュール ボックスは計算をもう少し合理的に保ちますが、空間効果を生み出すことができます。

欠点: コンテンツ領域自体のピクセル幅と高さが失われますが、ボックス モデルの計算はそれほど悪くありません。

于 2013-02-05T20:33:59.910 に答える