3

余分なhtmlマークアップを必要とせずに、ピクセル幅のパディングまたはマージンを流動的な列のデザインに組み込む方法を誰かが知っているかどうか疑問に思いました。

さらに説明するために、次のような単純なhtml/cssレイアウトを考えてみましょう。

<style>
    .cont{width:500px;height:200px;border:1px solid black;}
    .col{float:left;}
    #foo{background-color:blue;width:10%;}
    #bar{background-color:yellow;width:30%;}
    #baz{background-color:red;width:60%;}
</style>
<div class="cont">
    <div class="col" id="foo">Foo</div>
    <div class="col" id="bar">Bar</div>
    <div class="col" id="baz">Baz</div>
</div>

これは正しく表示されます（その他のcss表示のバグは無視して対処できます）。ただし、たとえば10pxのパディングをcolクラスに追加すると、フロートはインラインで表示されなくなります。クラスに3pxの境界線を配置したい場合も同じですcol。ボックスモデルから作成された追加のピクセルを反転させるために負のマージンを使用するcssテクニックを見てきましたが、それでも<div>幅は縮小されません。つまり、基本的に、私が欲しいのは、10％の幅を維持できるようにするテクニックですが、その10％の10pxはパディング（またはマージンなど）です。

4

4 に答える 4

7

「余分なhtmlマークアップ」がなければCSS3以前のソリューションはありません。widthにはパディングと境界線は含まれていません。これは仕様の性質です。負のマージンを避けたい場合は、各divに1つの追加ラッパーを追加するだけで機能します。css：

.padder {border: 3px solid green; padding: 10px;}

html：

<div class="cont">
    <div class="col" id="foo"><div class="padder">Foo</div></div>
    <div class="col" id="bar"><div class="padder">Bar</div></div>
    <div class="col" id="baz"><div class="padder">Baz</div></div>
</div>

CSS3の互換性については、を使用するbobinceの回答を参照してくださいbox-sizing。

于 2010-07-13T17:13:12.443 に答える
5

を使用box-sizingして意味を変更しwidth、パディング（および境界線-クァークズモードのボックスモデルに少し似ていますが、他の欠点はありません）が含まれるようにすることができます。

box-sizingは提案されたCSS3スタイルです。これは、残念ながら、古くてわかりにくいブラウザでは機能せず、一部のブラウザではプレフィックスが必要であることを意味します。

.col{
    float:left; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

さらに重要なことに、IE8より前のIEでは機能しません。これらのブラウザーをQuirksモードにすることで補正したくない場合、そして本当にそうしたくない場合は、box-sizingIE6-7に実装しようとする修正スクリプト/動作の1つを試すことができます。

これだけでは不十分な場合は、Scottが引用しているように、ラッパーメソッドにフォールバックする必要があります。少なくともこれはどこでも機能します。

いずれにせよ、合計が100％になるパーセンテージと液体のレイアウトで浮かぶように注意してください。ピクセル幅が使用するパーセンテージでうまく分割されない場合は、丸めが発生します。WebKitは通常、切り捨てられます。これにより、全幅が1ピクセルまたは2ピクセル恥ずかしくなる可能性があります。IE6-7は最も近くに丸められます。これにより、運が悪ければ1〜2ピクセルの余地が残り、フロートが予期せずラップする可能性があります。

于 2010-07-13T18:01:04.520 に答える
1

別のオプションは、幅/マージン/パディングを手動で計算することです。

コンテナの幅が固定されているため、これが可能です。

于 2010-07-13T17:16:57.217 に答える
-1

たくさんの問題を保存して、960グリッド（960.gs）、ブループリント（http://www.blueprintcss.org/）、またはYUI（http://developer.yahoo.com/yui/grids/）をチェックしてください。この問題は、パーセンテージ（960の場合はグリッドの数）を定義するだけで、残りの作業が自動的に行われるようになりました。YUIと960にはジェネレーターもあるので、作業をする必要はありません。追加のボーナスとして、これらのCSSフレームワークのいくつかには、IEの欠陥を「元に戻す」、UIの人を困惑させるフォント、間隔などを標準化するcss「リセット」があります。

私は最近、大手国際銀行向けにさまざまなデザインの数千のWebページの規制順守の更新を行いました。最初はYUIを標準化しましたが、展開が簡単な「グリッド」部分を本当に楽しむようになりました。1日に100万以上のユニークなサイトを確実に処理したり、目立った遅延を発生させたりすることはありません。動作に慣れれば、フロートやパディングなどを気にすることなく、数分でサイトをレイアウトできます。私の個人的な作業では、同様の理由でBlueprintと960の両方を使用しています。

于 2010-07-13T17:44:52.250 に答える