0

既存のサイトに960 グリッドシステムを実装しています。私は jQuery テーマを使用しています。つまり、コンテンツを持つすべての div にはui-widget-content、テーマの一部として 1px の境界線を与えるクラスが割り当てられます。コンテンツ div が白で、サイトの背景がオフホワイトであるため、この境界線のデザインが気に入っています。視覚的なコントラストが優れています。

しかし、私が抱えている問題は、これらの 1 ピクセルの境界線では、div が大きすぎるため、水平方向に収まらないことです。たとえば、これを行うと：

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

これにより、grid_10div が 2 ピクセル大きくなりすぎて、grid_16div の右端にぶら下がってしまいます。次のように新しいクラスを作成して、これを修正すると思いました。

.border-fix {
    border-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }

そして、それをgrid_10div に追加します。

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

ただし、現在、私の2つの内側のdivはgrid_5圧迫されているため、水平方向に十分なスペースがないため、横に並んでいるのではなく、互いに重なっています( grid_10divは境界線が本来あるべきよりも2ピクセル狭いため)外側ではなく内側）

では、どうすればこれを修正できますか (または修正可能ですか)? コンテンツを背景からうまく分離するので、div に境界線を付けるスタイルが好きです。しかし、境界線を使用すると、div の幅が台無しになります。この質問で提案されているように、余分な列を強制しないことを好みます。

私が試すかもしれない魔法のトリックはありますか？

ありがとう

4

3 に答える 3

1

通常、この動作を防ぐために、グリッドに使用されるコンテナにスタイルを持つ他のクラスを組み合わせないでください。グリッドシステムはそのまま採用する必要があります。境界線が必要で、異なるパディングまたはマージンを使用する場合は、グリッドセル内のコンテンツを別のdivでラップし、この要素にスタイルを適用する必要があります。そうしないと、グリッドが壊れます。

これにより余分なdivが作成されることはわかっていますが、一貫した動作を実現するのに役立ちます。固定サイズのグリッド（％ではなくpxで定義）を使用している場合は、幅から2pxを減算し、各セルに1pxの境界線を追加して均等にすることができるため、同じサイズと同じレイアウトになります。

于 2012-12-04T15:23:23.913 に答える
0

グリッド システムを壊さずに機能すると思われるソリューションを思いつきました。境界線を考慮して div サイズを編集する必要も、奇妙なマージンや 1 ピクセルのパディングを追加する必要もありません。おそらくこれは少しハックですが、私がしたことは次のような新しいクラスを作成することだけでした:

.border-fix {
    border: 0px;
    box-shadow: 0px 0px 3px grey;
}

このクラスを、境界線が必要な div に追加しました。これにより、クラスがオーバーライドui-widget-conentされて境界線が削除され、ボックスに影が追加されます。私がそこに持っている影のデザインは、0px の水平シフト、0px の垂直シフトを持ち、影を 3 px ぼかします。グレーの色で、これは div の幅に影響を与えることなく、通常の境界線とほぼ同じように見えます。

繰り返しますが、これは少しハックなやり方かもしれませんが、自分で言わない限り、狡猾なほど賢いようです :P

于 2012-12-04T19:16:18.670 に答える
0

grid_10 のスタイルを以前より 2 ピクセル少なく再定義してみませんか? (580だったかな? 580-2=578)

<style>
.grid_10 {width:578px}
</style>

<div class="grid_10 alpha ui-widget-content">

または、すべてのサイトで再定義できない場合は、grid_10 に適用されているスタイルを確認し、それらを新しいスタイル my_smaller_grid_10_with_borders で複製します。

私はこれですが、意味的には、次のようなものの違いは何なのか、まだ疑問に思っています。

<div class="grid_16 alpha omega">
    <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
...

そしてこのようなもの：

<table><tr><td>some stuf...</td>...

私が言いたいのは、960grid システムは、テーブルが吸うのと同じくらい吸うということです。意味的に正しい読みやすい文書を書くべきではないでしょうか?

（余談ですが、解決策がうまくいくことを願っています）

于 2012-12-04T15:29:27.847 に答える