2

初めて投稿するので、優しく扱ってください:)

そこで、Susy を使用して 2 つのボタンを並べて配置しようとしていますが、これはうまくいくようです。

.fifty {
    @include span-columns(3);
    @include nth-omega(2n);
}

ただし、ボタンに 1px の境界線を追加するとすぐに、有効な幅は 100%+4px になり、レイアウトが崩れます。

すべてのボタンのパディング値に Compass Vertical Rhythm プラグインを使用しているので、それを台無しにしたくありません。

どんな助けでも大歓迎です。

4

1 に答える 1

5

これは「Susy で列幅にパディングを含める方法」に関連していますが、2 番目のオプションは少し異なります。この問題は Susy に固有のものではありません - それはあらゆる流動的なレイアウトに当てはまります - しかし、Compass と Susy は最初の解決策であなたを助けることができます:

  1. box-sizing: border-box; を使用します。- これは現在、すべての主要なブラウザーでサポートされており、Compass には便利な box-sizing() mixin があり、プレフィックスを処理できます。どこでも (私のように) 使用すると、Susy コンテナーのサイズを変更できますが、Susy には便利な mixin が付属しており、すべてを修正することができます。コンテナを設定する前に、これをルートに追加するだけです。これにより、ボックスモデルが設定され、Susy に調整するように通知されます。

    @include border-box-sizing;

    box-sizing(border-box)または、必要な場所 (これらのボタン) でCompass mixin を使用するだけです。

  2. 境界線は % 値を取らないため、(デフォルトのコンテンツ ボックス モデルを使用して) 流体要素に境界線を追加する良い方法はありません。モデルを使用できない場合、border-box他の唯一のオプションは、マークアップに内部要素を追加し、外側をサイズ変更に使用し、内側を境界線とスタイルに使用することです。

  3. 3 番目のオプション (使用calc()) がありますが、それは難しく、ブラウザーのサポートもさらに少なくなります...

オプション #1 は、IE7 を楽しみから除外できる限り、群を抜いて最高です。

于 2013-06-16T17:59:31.577 に答える