0

サイトのレイアウトを試みているときに問題が発生しました。Blueprint Frameworkを使用していますが、divに境界線を適用すると発生します。それらの幅はspan-XX（または960gsgrid-xxで気づいたように）によって制御されるため、これらの画像に見られるように、要素に境界線を適用すると、グリッドから外れます。クリックしてズームクリックしてズームdivアウト 代替テキスト

span-XXそれを修正する唯一の方法は、要素の幅を変更することですが、クラスがもうないため、フレームワークのグリッドの目的は終了します。それを修正する他の方法はありますか？

4

2 に答える 2

3

私がそれを正しく理解しているなら、あなたはまたはspan-24それに似たものを持っていて、それに境界線を追加したいですよね？それを行う私の好ましい方法は

<div class="span-24">
    <div class="box">here</div>
</div>

box上記のスニペットのクラスに境界線を追加します。

于 2010-08-18T20:39:48.500 に答える
0

divをネストしたくない場合は、境界のある列用にいくつかの追加クラスを作成できます。1pxの境界線を使用しているので、次のようなクラスを作成しました。

.with-border-first {
  border: 1px solid red;
  margin-right: 8px;
}

.with-border {
  border: 1px solid red;
  margin-left: -1px; 
  margin-right: 9px;
}

.with-border-last {
  border: 1px solid red;
  margin-left: -2px;
}

すべての列にまたがるdivの周囲に境界線が必要な場合はもう1つ必要です（たとえば、青写真の24）。

次に、これらのクラスをスパンと一緒に使用します。次に例を示します。

<div class="span-8 with-border-first">
...
</div>

<div class="span-8 with-border">
...
</div>

<div class="span-8 last with-border-last">
...
</div>
于 2011-09-23T08:29:00.250 に答える